您的位置:首页 > Web前端 > JavaScript

EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框,并点一次触发一次事件

2015-04-16 09:24 531 查看
主要代码:

{
header: '属性值',
dataIndex: 'PropertyValueName',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
name:'PropertyValueName',
store: comboData_DynaPropertyValue,
valueField: "PropertyValueName",
displayField: "PropertyValueName",
mode: 'remote',//local
editable: false,
triggerAction: 'all',
autoload: true,
listeners: {
"expand": function (combo, store, index) {
var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;
comboData_DynaPropertyValue.load({
params: {
PropertyId: selectedData.PropertyId, //获取当前选择行的字段ID
start: startDynaProperty,
limit: limitDynaProperty
}
});
}
}
})
}


详细代码:

var startDynaProperty = 0;
var limitDynaProperty = 30;
Ext.define('DynaProperty', {
extend: 'Ext.data.Model',
fields: [
{ name: "PropertyId", type: "int" },
{ name: "PropertyName", type: "string" },
{ name: "PropertyEngName", type: "string" },
{ name: "PropertyValueId", type: "string" },
{ name: "PropertyValueName", type: "float" }
]
});

var store_DynaProperty = Ext.create('Ext.data.Store', {
model: 'DynaProperty',//这个地方DynaProperty不是一个对象,而是一个类
remoteSort: false,
remoteFilter: true,
pageSize: limitDynaProperty,  //页容量20条数据
method: 'POST',
proxy: {//代理
type: 'ajax',
url: "/UI/HttpHandlerData/GalleryManagement/GalleryManagement.ashx?operation=SearchPicList",//请求
extraParams: {
start: startDynaProperty,
limit: limitDynaProperty
},
reader: {
type: 'json',
root: 'Table',  //根节点
totalProperty: 'result' //数据总条数
}
},
sorters: [{
//排序字段。
property: 'PropertyId',
//排序类型,默认为 ASC
direction: 'ASC'
}],
autoLoad: true  //即时加载数据
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});

var comboData_DynaPropertyValue = Ext.create('Ext.data.Store', {
fields: ['PropertyValueId', 'PropertyValueName'],
autoLoad: true,
proxy: {
type: "ajax",
url: '/UI/HttpHandlerData/TrademarkCar/TrademarkCar.ashx?operation=Search',
reader: {
type: "json",
root: "Table"
}
}
});

var grid_DynaProperty = Ext.create('Ext.grid.Panel', {
store: store_DynaProperty,
autoWidth: true,
aotuHeight: true,
animCollapse: false,
enableColumnMove: false,
enableHdMenu: false,
loadMask: true,
loadMask: {
msg: '正在载入数据,请稍候...'
},
viewConfig: {
forceFit: true,
stripeRows: true
},
forceFit: true, //列表宽度自适应
stripeRows: true,//斑马线
autoSizeColumns: true, //根据每一列内容的宽度自适应列的大小
trackMouseOver: true, //鼠标移动时高亮显示
selModel: { selType: 'checkboxmodel' },   //选择框
scroll: true,
plugins: [rowEditing],
columns: [
{ header: '序号', xtype: 'rownumberer', align: 'left', width: 50 },
{
header: '属性', dataIndex: 'PropertyName', width: 200
}, {
header: '填值方式', dataIndex: 'ValueMethod', width: 200
},{
header: '属性值', dataIndex: 'PropertyValueName', width: 200
}, {
header: '属性值',
dataIndex: 'PropertyValueName',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
name:'PropertyValueName',
store: comboData_DynaPropertyValue,
valueField: "PropertyValueName",
displayField: "PropertyValueName",
mode: 'remote',//local
editable: false,
triggerAction: 'all',
autoload: true,
listeners: {
"expand": function (combo, store, index) {
var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;
comboData_DynaPropertyValue.load({
params: {
PropertyId: selectedData.PropertyId, start: startDynaProperty,
limit: limitDynaProperty
}
});
}
}
})
}
]
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: