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

                                    }

                                });

                            }

                        }

                    })

                }

    ]

});