Extjs EditorGridPanel中ComboBox列的显示问题

       EditorGridPanel中嵌入ComboBox通常不会正常显示ComboBox的store中本想显示字段,而是显示的EditorGridPanel中 store的dataindex指定的字段内容。

       为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,方法如下:

    //部门列表

    var comboxDepartmentStore = new Ext.data.Store({

        proxy: new Ext.data.HttpProxy({

            url: "GetDepartmentJson.aspx",

            method: 'GET'

        }),

        reader: new Ext.data.JsonReader({

            root: 'data',

            totalProperty: 'totalCount',

            fields: [

                        { name: 'departmentid', mapping: 'ID' },

                        { name: 'departmentname', mapping: 'Name' }

                        ]



        })

    });

    //根据Combobox列表中对应的Id的值来渲染

    function rendererMeterTypeCombobox(value, p, r) {

        var index = comboxDepartmentStore.find(Ext.getCmp('cbdepartment').valueField, value);

        var record = comboxDepartmentStore.getAt(index);

        var displayText = "";

        if (record == null) {

            return value;

        } else {

            return record.data.astype; // 获取record中的数据集中的display字段的值 

        }

    }





    var sm = new Ext.grid.CheckboxSelectionModel();



    var cm = new Ext.grid.ColumnModel({

        columns: [sm, new Ext.grid.RowNumberer(), {

            header: 'id',

            dataIndex: 'id',

            hidden: true

        }, {

            header: '姓名',

            width: 40,

            dataIndex: 'name'

        }, {

            header: '所属部门',

            width: 80,

            dataIndex: 'department',

            renderer: rendererDepartmentCombobox,

            editor: new Ext.form.ComboBox({

                id: "cbdepartment", //必须有 

                forceSelection: true,

                selectOnFocus: true,

                typeAhead: true,

                triggerAction: 'all',

                store: comboxDepartmentStore,

                mode: 'local',

                displayField: 'departmentname',

                valueField: 'departmentid',

                lazyRender: true

            })

        }],

        defaults: {

            zsortable: true,

            menuDisabled: false,

            width: 100

        }

    });



    var editGrid = new Ext.grid.EditorGridPanel({

        id: 'TestGrid',

        store: store, //EditorGridPanel使用的store

        trackMouseOver: true,

        disableSelection: false,

        clicksToEdit: 1, //设置点击几次才可编辑

        loadMask: true,

        autoHeight: true,

        cm: cm,

        sm: sm,

        viewConfig: {

            columnsText: '显示/隐藏列',

            sortAscText: '正序排列',

            sortDescText: '倒序排列',

            forceFit: true,

            enableRowBody: true

        },

        bbar: new Ext.PagingToolbar({

            pageSize: 25,

            store: store,

            displayInfo: true,

            displayMsg: '当前显示从{0}至{1}, 共{2}条记录',

            emptyMsg: "当前没有记录"

        })

    });

你可能感兴趣的:(gridPanel)