转自：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
    
      genderList = new List
     
      (); 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
    
      interestList = new List
     
      (); 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 + "
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
    
      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
    
     () { "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()方法