手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >extjs中grid中嵌入动态combobox的应用
extjs中grid中嵌入动态combobox的应用
摘要:拿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字段的值

}

【extjs中grid中嵌入动态combobox的应用】相关文章:

讲解JavaScript中for...in语句的使用方法

解析Node.js异常处理中domain模块的使用方法

Node.js中JavaScript操作MySQL的常用方法整理

javascript动态创建链接的方法

javascript实现动态改变层大小的方法

JavaScript中的函数嵌套使用

检测用户按键

JavaScript中length属性的使用方法

javascript中this的四种用法

javascript中动态函数用法

精品推荐
分类导航