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

时间:2021-10-02 08:19:29

主要代码:

 {
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
}
});
}
}
})
}
]
});