EXTJS4.2 控件之Grid 根据数据源某列数据不同绑定不同的控件setEditor

浏览数：96 / 时间：2015年06月09日

Grid 根据数据源某列数据不同绑定不同的控件，例如：文本框和下拉框

主要代码写在grid的 plugins: [rowEditing],下面这是定义的rowEditing对象，这里面的要定义成 Ext.grid.plugin.CellEditing而不是Ext.grid.plugin.RowEditing

Ext.getCmp(‘pvn‘).setEditor(form组件);这是给grid的列绑定组件，

pvn是在列中定义的id！

如下：

var rowEditing = Ext.create(‘Ext.grid.plugin.CellEditing‘, {// RowEditing

    clicksToEdit: 2,
    listeners: {
        ‘edit‘: function (e, s) {      
            var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;
            if (selectedData.ValueMethod == "1") {
                Ext.getCmp(‘pvn‘).setEditor(
                    new Ext.form.field.ComboBox({
                        name: ‘PropertyValueName‘,
                        typeAhead: true,
                        store: comboData_DynaPropertyValue,
                        valueField: "PropertyValueName",
                        displayField: "PropertyValueName",
                        queryMode: ‘remote‘, //local remote
                        triggerAction: ‘all‘,
                        lazyRender: true,
                        repeatTriggerClick: true,
                        listeners: {
                            "expand": function (combo, store, index) {
                                var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;
                                comboData_DynaPropertyValue.load({
                                    params: {
                                        PropertyId: selectedData.PropId,
                                        start: startDynaProperty,
                                        limit: limitDynaProperty
                                    }
                                });
                            }
                        }
                    }));
            } else {
                Ext.getCmp(‘pvn‘).setEditor(new Ext.form.field.Text());
            }
        }
    }
});

如图：1.绑定下拉框

技术分享

2.绑定文本框

技术分享

代码如下：

var rowEditing = Ext.create(‘Ext.grid.plugin.CellEditing‘, {// RowEditing
    clicksToEdit: 2,
    listeners: {
        ‘edit‘: function (e, s) {      
            var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;
            if (selectedData.ValueMethod == "1") {
                Ext.getCmp(‘pvn‘).setEditor(
                    new Ext.form.field.ComboBox({
                        name: ‘PropertyValueName‘,
                        typeAhead: true,
                        store: comboData_DynaPropertyValue,
                        valueField: "PropertyValueName",
                        displayField: "PropertyValueName",
                        queryMode: ‘remote‘, //local remote
                        triggerAction: ‘all‘,
                        lazyRender: true,
                        repeatTriggerClick: true,
                        listeners: {
                            "expand": function (combo, store, index) {
                                var selectedData = grid_DynaProperty.getSelectionModel().getSelection()[0].data;
                                comboData_DynaPropertyValue.load({
                                    params: {
                                        PropertyId: selectedData.PropId,
                                        start: startDynaProperty,
                                        limit: limitDynaProperty
                                    }
                                });
                            }
                        }
                    }));
            } else {
                Ext.getCmp(‘pvn‘).setEditor(new Ext.form.field.Text());
            }
        }
    }
});

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,
        renderer:
            function (v, nv, v1) {
                if (v == "1") {
                    return ‘选择属性值‘;
                } else {
                    return ‘手输属性值‘;
                }
            }
    }, {
        header: ‘属性英文名‘,
        id: ‘PropertyEngName‘,
        dataIndex: ‘PropertyEngName‘,
        width: 200,
        editor: {
            allowBlank: true
        }
    }, {
        header: ‘属性值‘,
        id: ‘pvn‘,
        dataIndex: ‘PropertyValueName‘,
        width: 130,
        editor: { xtype: ‘numberfield‘ }
    }]
});