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