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

主要代码：

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