extjs中g(shù)rid中嵌入動(dòng)態(tài)combobox的應(yīng)用
更新時(shí)間:2011年01月01日 18:40:46 作者:
今天需要在grid中嵌入combobox,在網(wǎng)上找了好久也沒(méi)有找到一個(gè)正確可行的方法,可能是版本問(wèn)題(我版本是extjs 3.0),沒(méi)有繼續(xù)研究其原因,自己查找資料,終于實(shí)現(xiàn)功能?,F(xiàn)在分享一下代碼。
拿combobox的數(shù)據(jù)
comboDS = new Ext.data.JsonStore({
url : 'test.do',
fields : [{
name : 'id'
}, {
name : 'display'
}]
});
combobox定義
combobox 中的id必須要有,后面要跟據(jù)id取combobox值。
var comboBox = new Ext.form.ComboBox({
id : "cb", //必須有
typeAhead : true,
readOnly : true,
allowBlank : false,
autoScroll : true,
selectOnFocus : true,
emptyText : '請(qǐng)選擇...',
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 : "編號(hào)",
dataIndex : "bh"
}, {
header : "測(cè)試",
dataIndex : "test",
renderer : renderer,
editor : comboBox
}]);
grid = new Ext.grid.EditorGridPanel({
title : '測(cè)試',
ds : ds,
cm : cm,
clicksToEdit : 1,
viewConfig : {
forceFit : true
},
bbar : new Ext.PagingToolbar({
pageSize : RowCount,
store : ds,
displayInfo : true,
displayMsg : '顯示第 {0} 條到 {1} 條記錄,一共 {2} 條',
emptyMsg : "沒(méi)有記錄"
})
});
cm 的renderer函數(shù)
此方法為解決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中的數(shù)據(jù)集中的display字段的值
}
復(fù)制代碼 代碼如下:
comboDS = new Ext.data.JsonStore({
url : 'test.do',
fields : [{
name : 'id'
}, {
name : 'display'
}]
});
combobox定義
combobox 中的id必須要有,后面要跟據(jù)id取combobox值。
復(fù)制代碼 代碼如下:
var comboBox = new Ext.form.ComboBox({
id : "cb", //必須有
typeAhead : true,
readOnly : true,
allowBlank : false,
autoScroll : true,
selectOnFocus : true,
emptyText : '請(qǐng)選擇...',
store : comboDS,
forceSelection : true,
triggerAction : 'all',
displayField : 'display',
valueField : 'id'
});
grid 的定義:
復(fù)制代碼 代碼如下:
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 : "編號(hào)",
dataIndex : "bh"
}, {
header : "測(cè)試",
dataIndex : "test",
renderer : renderer,
editor : comboBox
}]);
grid = new Ext.grid.EditorGridPanel({
title : '測(cè)試',
ds : ds,
cm : cm,
clicksToEdit : 1,
viewConfig : {
forceFit : true
},
bbar : new Ext.PagingToolbar({
pageSize : RowCount,
store : ds,
displayInfo : true,
displayMsg : '顯示第 {0} 條到 {1} 條記錄,一共 {2} 條',
emptyMsg : "沒(méi)有記錄"
})
});
cm 的renderer函數(shù)
此方法為解決combobox修改后顯示為id
復(fù)制代碼 代碼如下:
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中的數(shù)據(jù)集中的display字段的值
}
您可能感興趣的文章:
- Extjs4.0 ComboBox如何實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)
- ExtJS4給Combobox設(shè)置列表中的默認(rèn)值示例
- Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹(shù)效果(自寫(xiě))
- extjs3 combobox取value和text案例詳解
- Extjs中ComboBox加載并賦初值的實(shí)現(xiàn)方法
- Extjs EditorGridPanel中ComboBox列的顯示問(wèn)題
- ExtJS PropertyGrid中使用Combobox選擇值問(wèn)題
- ExtJs使用總結(jié)(非常詳細(xì))
- ExtJS 學(xué)習(xí)專題(一) 如何應(yīng)用ExtJS(附實(shí)例)
- Extjs讓combobox寫(xiě)起來(lái)簡(jiǎn)潔又漂亮
相關(guān)文章
JavaScript的Ext JS框架中的GridPanel組件使用指南
GridPanel和TreePnal功能類似,都是Ext JS中的表格便攜利器,相比之下GridPanel還要更強(qiáng)大并且更復(fù)雜一些,下面我們就來(lái)整理一下JavaScript的Ext JS框架中的GridPanel組件使用指南2016-05-05Extjs學(xué)習(xí)過(guò)程中新手容易碰到的低級(jí)錯(cuò)誤積累
新手在學(xué)習(xí)Extjs過(guò)程中的低級(jí)錯(cuò)誤積累2010-02-02extJs 下拉框聯(lián)動(dòng)實(shí)現(xiàn)代碼
extJs 下拉框聯(lián)動(dòng)實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-04-04Extjs3.0 checkboxGroup 動(dòng)態(tài)添加item實(shí)現(xiàn)思路
Extjs3.0中的CheckboxGroup默認(rèn)不能動(dòng)態(tài)添加item,如需要數(shù)據(jù)動(dòng)態(tài)創(chuàng)建,試著創(chuàng)建整個(gè)CheckboxGroup,而不是動(dòng)態(tài)添加item,具體實(shí)現(xiàn)如下,感興趣的朋友可以了解下2013-08-08Extjs NumberField后面加單位實(shí)現(xiàn)思路
本文為大家介紹下在NumberField后面加單位,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-07-07解決extjs grid 不隨窗口大小自適應(yīng)的改變問(wèn)題
在使用grid的時(shí)候窗口改變了但是grid卻不能自適應(yīng),下面有個(gè)不粗的解決方法,大家可以參考下2014-01-01導(dǎo)入extjs、jquery 文件時(shí)$使用沖突問(wèn)題解決方法
在html頁(yè)面中,沒(méi)有導(dǎo)入jquery文件時(shí),可以正常保存,而導(dǎo)入jquery文件后,則不能不存了,發(fā)現(xiàn)導(dǎo)入的jquery文件和現(xiàn)有的extjs文件沖突了2014-01-01