ExtJS ComboBox 下拉列表详细用法
分类：原文转自起飞网：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()
});
运行页面，截图如下：
这大概就是最简单的用法了，绑定一个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将加载到数据：
默认值
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()方法
