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: "当前没有记录"
        })
    });

转载于:https://www.cnblogs.com/jadebug/archive/2011/07/02/2096167.html