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)的下拉框樹效果(自寫)
- 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寫起來(lái)簡(jiǎn)潔又漂亮
相關(guān)文章
ExtJS4的requires是新增的機(jī)制，主要是實(shí)現(xiàn)異步加載機(jī)制，在下面的文章總將為大家介紹下ExtJS4中的requires使用方法，需要的朋友不要錯(cuò)過(guò)2013-12-12
extjs3 combobox取value和text案例詳解
使用combobox時(shí)，它有一個(gè)hiddenName的屬性，專門用于提交combobox中value的值,接下來(lái)介紹extjs3 combobox如何取value和text值,感興趣的朋友可以不要錯(cuò)過(guò)了啊2013-02-02
Extjs4 關(guān)于Store的一些操作(加載/回調(diào)/添加)
本文詳細(xì)介紹下關(guān)于加載和回調(diào)的問(wèn)題、從一個(gè)store添加符合某條件記錄給另一個(gè)store中，感興趣的朋友可以參考下，希望對(duì)你有所幫助2013-04-04
ExtJS4 Grid改變單元格背景顏色及Column render學(xué)習(xí)
利用的是Column的render實(shí)現(xiàn)單元格背景顏色改變,本文給予了實(shí)現(xiàn)代碼，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)ExtJS4 Grid有所幫助2013-02-02
ExtJS下 Ext.Direct加載和提交過(guò)程排錯(cuò)小結(jié)
基礎(chǔ)實(shí)一點(diǎn),會(huì)有好處的,排錯(cuò)的時(shí)候就體現(xiàn)出來(lái)了,下面就Ext.Direct做一些排錯(cuò)筆記與大家一一分享,感興趣的朋友可以參考下哈2013-04-04
ExtJS4給Combobox設(shè)置列表中的默認(rèn)值示例
這篇文章主要介紹了ExtJS4如何給Combobox設(shè)置列表中的默認(rèn)值,需要的朋友可以參考下2014-05-05
Ext.util.Observable有一個(gè)重要的功能，可以為某個(gè)事件設(shè)置攔截器，統(tǒng)一管理方法的處罰。使用capture()和releaseCapture()來(lái)實(shí)現(xiàn)這個(gè)功能。2010-01-01
extjs ColumnChart設(shè)置不同的顏色實(shí)現(xiàn)代碼
extjs為ColumnChart設(shè)置不同的顏色想必有很多朋友還是比較陌生的吧，接下來(lái)為大家詳細(xì)介紹下具體設(shè)置代碼，感興趣的朋友可以參考下哈2013-05-05
Extjs組件的定義在網(wǎng)上看到了一個(gè)實(shí)例，于是拷了下來(lái)留著以后用，現(xiàn)在把它曬出來(lái)與大家一起分享，感興趣的各位可不要錯(cuò)過(guò)了哈2013-06-06
extjs grid設(shè)置某列背景顏色和字體顏色的方法
extjs grid設(shè)置某列背景顏色和字體顏色的方法，需要的朋友可以參考下。2010-09-09