45. ExtJS ComboBox 下拉列表詳細用法

轉自：https://blog.csdn.net/luckypeng/article/details/46496151

ComboBox 是ExtJS中經常用到的控件，今天我們來講一下它的一些用法。

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，設置顯示和值的字段就可以了。代碼注釋如下：

 

首先我們來修改一下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如下：

我們修改了proxy中的actionMethods：

 

這樣就可以實現通過POST方式請求數據了。

 

此時form中的代碼不用修改，直接編譯運行就可以了。

combo內置了對多選的支持，只需要將multiSelect配置項設置為true即可。為了配合例子說明多選如何使用，我們在form中增加一個興趣的字段，其配置項如下：

 

多選的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：

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()方法