extjs中grid中嵌入动态combobox的应用

178 阅读 0 评论 118 点赞

我是靠谱客的博主威武夏天，最近开发中收集的这篇文章主要介绍extjs中grid中嵌入动态combobox的应用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

拿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字段的值 
} 