Extjs EditorGridPanel中ComboBox列的显示问题
Extjs EditorGridPanel中ComboBox列的显示问题
发布时间:2016-12-30 来源:查字典编辑
摘要:为了解决这个问题需要在EditorGridPanel的ColumnModel中显示ComboBox的地方使用renderer属性,重新渲染,...

为了解决这个问题需要在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: "当前没有记录"

})

});

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类