Extjs EditorGridPanel中ComboBox列的显示问题 |
为了解决这个问题需要在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: "当前没有记录" }) }); |