ComboBox 是ExtJS中經常用到的控件，今天我們來講一下它的一些用法。
使用本地Store
ComboBox需要結合Store一起使用，下面是一個最簡單的例子，結合本地的Store的用法：
var genderStore = Ext.create("Ext.data.Store", { fields: ["Name", "Value"], data: [ { Name: "男", Value: 1 }, { Name: "女", Value: 2 } ] }); var form = Ext.create("Ext.form.FormPanel", { layout: "column", title: "用戶信息", border: false, margin: "10", width: 800, defaultType: "textfield", fieldDefaults: { labelAlign: 'right', labelWidth: 80, margin: "5 0", columnWidth: 0.3, msgTarget: "qtip", selectOnFocus: true }, items: [ { name: "UserName", fieldLabel: "姓名", allowBlank: false }, { xtype: "combobox", name: "Gender", fieldLabel: "性別", store: genderStore, editable: false, displayField: "Name", valueField: "Value", emptyText: "--請選擇--", queryMode: "local" } ], renderTo: Ext.getBody() });
運行頁面，截圖如下：
這大概就是最簡單的用法了，綁定一個store，設置顯示和值的字段就可以了。代碼註釋如下：
xtype: "combobox", //使用xtype定義 name: "Gender", //form提交時的名稱 fieldLabel: "性別", //顯示的Label store: genderStore, //綁定的Store editable: false, //是否可編輯 displayField: "Name", //顯示的字段 valueField: "Value", //值的字段 emptyText: "--請選擇--", //當沒有值時的水印文字 queryMode: "local" //查詢模式
使用遠程數據動態加載的Store
首先我們來修改一下Store：
var genderStore = Ext.create("Ext.data.Store", { fields: ["Name", "Value"], autoLoad: true, proxy: { type: "ajax", actionMethods: { read: "POST" }, url: rootUrl + "Combo/FetchGenderList", reader: { type: "json", root: "data" } } });
此時，我們的Store會加載url中的Json參數，看看我們ASP.NET MVC 中的代碼：
public JsonResult FetchGenderList() { AjaxResult result = new AjaxResult(); List<GenderModel> genderList = new List<GenderModel>(); genderList.Add(new GenderModel() { Name = "男", Value = 1 }); genderList.Add(new GenderModel() { Name = "女", Value = 2 }); result.Set(true, genderList); return Json(result); }
由於在MVC中，默認的JsonResult不允許Get請求，所以我們在請求數據的時候使用了POST方式，這通過設置actionMethods來實現的，默認的actionMethods如下：
{create: 'POST', read: 'GET', update: 'POST', destroy: 'POST'}
我們修改了proxy中的actionMethods：
actionMethods: { read: "POST" }
這樣就可以實現通過POST方式請求數據了。
此時form中的代碼不用修改，直接編譯運行就可以了。
combo 多選
combo內置了對多選的支持，只需要將multiSelect配置項設置爲true即可。爲了配合例子說明多選如何使用，我們在form中增加一個興趣的字段，其配置項如下：
{ xtype: "combobox", name: "Interest", fieldLabel: "興趣", store: interestStore, editable: false, multiSelect: true, displayField: "InterestName", valueField: "InterestCode", emptyText: "--請選擇--", queryMode: "local" }
多選的store如下：
var interestStore = Ext.create("Ext.data.Store", { fields: ["InterestName", "InterestCode"], autoLoad: true, proxy: { type: "ajax", actionMethods: { read: "POST" }, url: rootUrl + "Combo/FetchInterestList", reader: { type: "json", root: "data" } } });
服務器的方法如下：
public JsonResult FetchInterestList() { OperateResult result = new OperateResult(); List<InterestModel> interestList = new List<InterestModel>(); interestList.Add(new InterestModel() { InterestCode = "01", InterestName = "讀書" }); interestList.Add(new InterestModel() { InterestCode = "02", InterestName = "攝影" }); interestList.Add(new InterestModel() { InterestCode = "03", InterestName = "集郵" }); interestList.Add(new InterestModel() { InterestCode = "04", InterestName = "音樂" }); interestList.Add(new InterestModel() { InterestCode = "05", InterestName = "種植" }); interestList.Add(new InterestModel() { InterestCode = "06", InterestName = "跳舞" }); result.Set(true, interestList); return Json(result); }
我都是硬編碼，沒有搞數據庫動態獲取什麼的，只是一個演示。
編譯代碼之後刷新頁面，看到新增的字段已經顯示出來了，我們選擇兩個，效果圖如下：
賦值和取值
不管是什麼控件，賦值和取值都是大家比較關心的。來看看賦值的代碼：
buttons: [ { text: "爲性別賦值", handler: function () { this.up("form").down("combobox[name=Gender]").setValue(2); } }, { text: "爲興趣賦值", handler: function () { this.up("form").down("combobox[name=Interest]").setValue(["02", "04"]); } } ]
爲form添加兩個Button，分別爲兩個combobox賦值。
- 對於單選的賦值，只要把value傳遞給combobox的setValue方法就可以了。
- 對於多選的賦值，需要傳遞value的數組給setValue方法。
接下來看看獲取值的方法，繼續添加一個獲取值的Button，代碼如下：
{ text: "獲取Form值", handler: function () { var data = this.up("form").getValues(); Ext.MessageBox.alert("提示", "Gender:" + data.Gender + "<br />Interest:" + data.Interest); } }
data中包含了我們form中的值，它是Json格式的數據，我們可以方便的獲取Gender和Interest的數據。運行代碼的截圖如下：
這些都是客戶端的處理，在真正使用的時候，我們是需要將整個form提交給服務器的，那麼接下來看看服務器的處理吧，繼續添加按鈕，用來提交form：
{ text: "提交Form", handler: function () { var formCmp = this.up("form"); if (formCmp.isValid()) { formCmp.submit({ url: rootUrl + "Combo/SubmitFormData", mehtod: "POST", success: function (form, action) { var result = action.result; }, failure: function (form, action) { Ext.Msg.alert("failed", action.result.message); } }); } } }
服務器端的處理，我們首先添加一個UserModel：
public class UserModel { public string UserName { get; set; } public int Gender { get; set; } public List<string> Interest { get; set; } }
然後是SubmitFormData的代碼：
public JsonResult SubmitFormData(UserModel model) { OperateResult result = new OperateResult(); result.Set(true); return Json(result); }運行程序，我們打開跟蹤調試，得到model的值如下：
我們服務器已經很好的接收到了值。
然後我們在看最後一個例子，使用form從服務器加載數據，這個也是很常用的。首先還是添加按鈕，當點擊的時候從服務器取數據：
{ text: "加載Form數據", handler: function () { var formCmp = this.up("form"); formCmp.load({ url: rootUrl + "Combo/FetchFormData", mehtod: "POST", success: function (form, action) { }, failure: function (form, action) { Ext.Msg.alert("failed", action.result.message); } }); } }
然後是服務器的方法：
public JsonResult FetchFormData() { OperateResult result = new OperateResult(); UserModel model = new UserModel(); model.UserName = "Jerry"; model.Gender = 2; model.Interest = new List<string>() { "01", "03", "06" }; result.Set(true, model); return Json(result); }
當單擊按鈕的時候，我們的form將加載到數據：
默認值
listeners : {
afterRender : function(combo) {
var firstValue = store.reader.jsonData[0].text;
combo.setValue(firstValue);//同時下拉框會將與name爲firstValue值對應的 text顯示
}
}
combo.on('load',function(){Ext.getCmp("myCombo").setValue(1);});
顯示的值
獲取實際值是用，getValue()方法，
獲取顯示值是用，getRawValue()方法