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 rendererDepartmentCombobox(value) {
    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字段的值,这里的"astype"是指comboxDepartmentStore中的字段.
    }
}

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