extjs中g(shù)rid中嵌入動態(tài)combobox的應(yīng)用
更新時間：2011年01月01日 18:40:46 作者：
今天需要在grid中嵌入combobox，在網(wǎng)上找了好久也沒有找到一個正確可行的方法，可能是版本問題（我版本是extjs 3.0），沒有繼續(xù)研究其原因，自己查找資料，終于實現(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 : '請選擇...',
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函數(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字段的值
}
復制代碼 代碼如下:
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 : '請選擇...',
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函數(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字段的值
}
您可能感興趣的文章:
- Extjs4.0 ComboBox如何實現(xiàn)三級聯(lián)動
- ExtJS4給Combobox設(shè)置列表中的默認值示例
- Extjs中ComboBoxTree實現(xiàn)的下拉框樹效果(自寫)
- extjs3 combobox取value和text案例詳解
- Extjs中ComboBox加載并賦初值的實現(xiàn)方法
- Extjs EditorGridPanel中ComboBox列的顯示問題
- ExtJS PropertyGrid中使用Combobox選擇值問題
- ExtJs使用總結(jié)(非常詳細)
- ExtJS 學習專題（一） 如何應(yīng)用ExtJS（附實例）
- Extjs讓combobox寫起來簡潔又漂亮
相關(guān)文章
ExtJS4的requires是新增的機制，主要是實現(xiàn)異步加載機制，在下面的文章總將為大家介紹下ExtJS4中的requires使用方法，需要的朋友不要錯過2013-12-12
extjs3 combobox取value和text案例詳解
使用combobox時，它有一個hiddenName的屬性，專門用于提交combobox中value的值,接下來介紹extjs3 combobox如何取value和text值,感興趣的朋友可以不要錯過了啊2013-02-02
Extjs4 關(guān)于Store的一些操作(加載/回調(diào)/添加)
本文詳細介紹下關(guān)于加載和回調(diào)的問題、從一個store添加符合某條件記錄給另一個store中，感興趣的朋友可以參考下，希望對你有所幫助2013-04-04
ExtJS4 Grid改變單元格背景顏色及Column render學習
利用的是Column的render實現(xiàn)單元格背景顏色改變,本文給予了實現(xiàn)代碼，感興趣的朋友可以了解下，或許對你學習ExtJS4 Grid有所幫助2013-02-02
ExtJS下 Ext.Direct加載和提交過程排錯小結(jié)
基礎(chǔ)實一點,會有好處的,排錯的時候就體現(xiàn)出來了,下面就Ext.Direct做一些排錯筆記與大家一一分享,感興趣的朋友可以參考下哈2013-04-04
ExtJS4給Combobox設(shè)置列表中的默認值示例
這篇文章主要介紹了ExtJS4如何給Combobox設(shè)置列表中的默認值,需要的朋友可以參考下2014-05-05
Ext.util.Observable有一個重要的功能，可以為某個事件設(shè)置攔截器，統(tǒng)一管理方法的處罰。使用capture()和releaseCapture()來實現(xiàn)這個功能。2010-01-01
extjs ColumnChart設(shè)置不同的顏色實現(xiàn)代碼
extjs為ColumnChart設(shè)置不同的顏色想必有很多朋友還是比較陌生的吧，接下來為大家詳細介紹下具體設(shè)置代碼，感興趣的朋友可以參考下哈2013-05-05
Extjs組件的定義在網(wǎng)上看到了一個實例，于是拷了下來留著以后用，現(xiàn)在把它曬出來與大家一起分享，感興趣的各位可不要錯過了哈2013-06-06
extjs grid設(shè)置某列背景顏色和字體顏色的方法
extjs grid設(shè)置某列背景顏色和字體顏色的方法，需要的朋友可以參考下。2010-09-09