extjs中grid中嵌入动态combobox的应用
extjs中grid中嵌入动态combobox的应用
发布时间:2016-12-30 来源:查字典编辑
摘要:拿combobox的数据复制代码代码如下:comboDS=newExt.data.JsonStore({url:'test.do',fiel...

拿combobox的数据

复制代码 代码如下:

comboDS = new Ext.data.JsonStore({

url : 'test.do',

fields : [{

name : 'id'

}, {

name : 'display'

}]

});

combobox定义

combobox 中的id必须要有,后面要跟据id取combobox值。

复制代码 代码如下:

var comboBox = new Ext.form.ComboBox({

id : "cb", //必须有

typeAhead : true,

readOnly : true,

allowBlank : false,

autoScroll : true,

selectOnFocus : true,

emptyText : '请选择...',

store : comboDS,

forceSelection : true,

triggerAction : 'all',

displayField : 'display',

valueField : 'id'

});

grid 的定义:

复制代码 代码如下:

ds = new Ext.data.Store({

baseparams : {

start : 0,

limit : RowCount

},

proxy : new Ext.data.HttpProxy({

url :'test2.do'

}),

reader : new Ext.data.JsonReader({

root : 'data',

totalProperty : 'totalCount'

}, [{

name : "bh"

}, {

name : "test"

}]);

});

var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {

header : "编号",

dataIndex : "bh"

}, {

header : "测试",

dataIndex : "test",

renderer : renderer,

editor : comboBox

}]);

grid = new Ext.grid.EditorGridPanel({

title : '测试',

ds : ds,

cm : cm,

clicksToEdit : 1,

viewConfig : {

forceFit : true

},

bbar : new Ext.PagingToolbar({

pageSize : RowCount,

store : ds,

displayInfo : true,

displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条',

emptyMsg : "没有记录"

})

});

cm 的renderer函数

此方法为解决combobox修改后显示为id

复制代码 代码如下:

function renderer(value, p, r) {

var index = comboDS.find(Ext.getCmp('cb').valueField, value);

var record = comboDS.getAt(index);

var displayText = "";

if (record == null) {

displayText = value;

} else {

displayText = record.data.display;// 获取record中的数据集中的display字段的值

}

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