ExtJS ComboBox 下拉列表详细用法

曾经终败给现在 2021-09-14 10:12 636阅读 0赞

原文转自[起飞网][Link 1]：[http://www.qeefee.com/article/000171][http_www.qeefee.com_article_000171]

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()
    });

运行页面，截图如下：

![image][]

这大概就是最简单的用法了，绑定一个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);
    }

我都是硬编码，没有搞数据库动态获取什么的，只是一个演示。

编译代码之后刷新页面，看到新增的字段已经显示出来了，我们选择两个，效果图如下：

![image][image 1]

### 赋值和取值 ###

不管是什么控件，赋值和取值都是大家比较关心的。来看看**赋值**的代码：

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赋值。

![image][image 2]

*  对于单选的赋值，只要把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的数据。运行代码的截图如下：

![image][image 3]

这些都是客户端的处理，在真正使用的时候，我们是需要将整个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的值如下：

![image][image 4]

我们服务器已经很好的接收到了值。

然后我们在看最后一个例子，使用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将加载到数据：

![image][image 5]

## 默认值 ##

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

[Link 1]: http://www.qeefee.com/extjs
[http_www.qeefee.com_article_000171]: http://www.qeefee.com/article/000171
[image]: http://www.qeefee.com/Upload/wlw/5545741526294439787.png
[image 1]: http://www.qeefee.com/Upload/wlw/4679282135637758922.png
[image 2]: http://www.qeefee.com/Upload/wlw/5181209967609536581.png
[image 3]: http://www.qeefee.com/Upload/wlw/5393191196394699509.png
[image 4]: http://www.qeefee.com/Upload/wlw/4943204411206382451.png
[image 5]: http://www.qeefee.com/Upload/wlw/5069662701286545084.png