ExtJS ComboBox 下拉列表详细用法

来源：互联网发布：购物价格走势软件编辑：程序博客网时间：2024/05/17 05:12

ComboBox 是ExtJS中经常用到的控件，今天我们来讲一下它的一些用法。

属性：

var combo = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ['value', 'text'],
data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']]
}),
hiddenName:'product_code',//提交到后台的input的name
mode:'local',//数据加载模式，'local'本地加载，'remote'远程加载
valueField : 'value', //值字段
displayField : 'text', //显示字段
value:'1001', //默认值,要设置为提交给后台的值，不要设置为显示文本
emptyText : '请选择', //提示信息
mode : 'local', //数据加载模式，local代表本地数据
triggerAction : 'all', // 显示所有下列数据，一定要设置属性triggerAction为a
readOnly : false, //只读，为true时不能编辑不能点击
editable:false, //是否可编辑，为true时可以手写录入
pageSize:0 //当设置大于0时会显示分页按钮
})

使用本地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: "性别",             //显示的Labelstore: genderStore,             //绑定的Storeeditable: 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将加载到数据：

0 0