首先定義一數(shù)據(jù)源，一般使用simpleStore，jsonStore。需要注意的是simpleStore用于讀取二維數(shù)組的數(shù)據(jù)，而jsonStroe用于讀取json數(shù)據(jù)格式。
Combox使用simpleStore 代碼如下所示：
var subjectField = new Ext.form.ComboBox({
fieldLabel : '分類名稱',
hiddenName : 'drug.subjectCode',// 傳遞到后臺的參數(shù)
store : new Ext.data.SimpleStore({
autoLoad : true,
url :'xxx',
fields : ['subjectCode', 'subjectName']
}),
valueField : 'subjectCode',// 域的值,對應(yīng)于store里的fields
displayField : 'subjectName',// 顯示的域,對應(yīng)于store里的fields
typeAhead : true,// 設(shè)置true，完成自動提示
mode : 'local', // 設(shè)置local，combox將從本地加載數(shù)據(jù)
triggerAction : 'all',// 觸發(fā)此表單域時(shí),查詢所有
selectOnFocus : true,
anchor : '90%',
forceSelection : true
});
服務(wù)端返回的數(shù)據(jù)結(jié)構(gòu)如下所示：
[ ["00000003","硬膏劑"], ["00000005","滴眼劑"], ["00000016","栓劑"], ["00000017","注射劑"], ["00000018","軟膏劑"] ] 當(dāng)combox使用jsonStore時(shí)，一般運(yùn)用于分頁查詢。頁面效果如下所示：
示例代碼如下所示：
// 藥品商品名
var itemNameField = new Ext.form.ComboBox({
width : 200,
fieldLabel : '藥品商品名',
hiddenName : 'drug.itemName',
store : advanceStore,
valueField : 'itemName',
displayField : 'itemName',
typeAhead : true,
mode : 'remote',// 分頁查詢必須設(shè)置為 remote,當(dāng)我們點(diǎn)擊下一頁的時(shí)候是從服務(wù)端取數(shù)據(jù)，而不是本地
triggerAction : 'all',
emptyText : '請選擇一個(gè)分類名',
selectOnFocus : true,
minChars : 0, // 完成自動提示,當(dāng)mode為‘local’時(shí),默認(rèn)為0,當(dāng)mode為‘remote’時(shí)候,默認(rèn)為4,這里設(shè)置為0
pageSize : 10,// 每頁顯示的記錄數(shù)字
queryParam :'drug.itemName' // 在combox內(nèi)敲入字符時(shí)候，combox向后臺查詢傳遞的參數(shù),這里設(shè)置為'drug.itemName'是為了更好的封裝，默認(rèn)傳遞參數(shù)‘query’
});
這里還有一個(gè)問題，就是Combox設(shè)置初始值。
我是采用如下做法的，不知道各位知不知道其他用法？
var subjectField = new Ext.form.ComboBox({
fieldLabel : '分類名稱',
hiddenName : 'drug.subjectCode',
store : new Ext.data.SimpleStore({
autoLoad : true,
url : 'xxx',
fields : ['subjectCode', 'subjectName'],
listeners : {
load : function(){ subjectField.setValue(record.get("drug.subjectCode"));
}
}
}),
valueField : 'subjectCode',
displayField : 'subjectName',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : '請選擇一個(gè)分類名',
selectOnFocus : true,
anchor : '90%',
forceSelection : true
});
原文出自：
http://www.iteye.com/topic/296710