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: "性别", //显示的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将加载到数据: