extjs中grid中嵌入动态combobox的应用
更新时间：2011年01月01日 18:40:46 作者：
今天需要在grid中嵌入combobox，在网上找了好久也没有找到一个正确可行的方法，可能是版本问题（我版本是extjs 3.0），没有继续研究其原因，自己查找资料，终于实现功能。现在分享一下代码。
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
拿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字段的值
}
复制代码 代码如下:
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行 右键菜单的两种方法，需要用extjs制作右键菜单的朋友可以参考下。2010-06-06
Extjs Label的 fieldLabel和html属性值对齐的方法
这篇文章主要介绍了Extjs Label的 fieldLabel和html属性值不能对齐的解决方法,需要的朋友可以参考下2014-06-06
form恐怕是Web开发中最常用的控件了，Extjs对普通的html form进行了一些封装，使其具有基本的外观和一些简便的和服务器进行通信的方法。2010-01-01
这篇文章主要介绍了extjs_02_grid显示本地数据、显示跨域数据的具体实现,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了ext combobox动态加载数据库数据并附前后台实现,需要的朋友可以参考下2014-06-06
ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中通过javascript调用ExtJS的类及控件来实现需要的功能。2009-04-04
在Ext中直接使用DWR2009-03-03
常用Extjs工具:Extjs.util.Format使用方法
常用Extjs工具:Extjs.util.Format使用方法，需要的朋友可以参考下2012-03-03
extjs 初始化checkboxgroup值的代码，需要的朋友可以参考下。2011-09-09
Extjs Ext.MessageBox.confirm 确认对话框详解
显示一个确认对话框，用来代替JavaScript标准的confirm()方法，具有两个按钮“是”和“否”如果为其提供一个回调函数，则该函数将在单击按钮后被调用(包括右上角的推出按钮)，所单击按钮的id将被作为唯一的参数传递到回调函数中。2010-04-04
最新评论