码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-04-21 20:14:12      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/foreverfendou/p/4445053.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!