转自: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<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如下:

我们修改了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<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:

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

45. ExtJS ComboBox 下拉列表详细用法的更多相关文章

  1. ExtJS ComboBox 下拉列表详细用法

    ExtJS ComboBox 下拉列表详细用法 标签: combobox 2015-06-14 23:23 5171人阅读 评论(2) 收藏 举报  分类: ExtJS(32)    目录(?)[+] ...

  2. oracle中to_date详细用法示例(oracle日期格式转换)

    这篇文章主要介绍了oracle中to_date详细用法示例,包括期和字符转换函数用法.字符串和时间互转.求某天是星期几.两个日期间的天数.月份差等用法 TO_DATE格式(以时间:2007-11-02 ...

  3. MFC中ComboBox控件用法

    MFC ComboBox 一.入门篇 ComboBox (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项 ...

  4. Linux定时对日志批量打包Shell脚本及定时任务crontab 详细用法

    一.需求背景     因此次项目的生产环境中部署了多套系统,每天会产生大量的日志(数百GB的量),侵占了服务器宝贵的存储资源空间.为了有效缓解服务器存储压力,考虑通过Linux的Shell脚本结合cr ...

  5. C#播放声音的四种方法 +AxWindowsMediaPlayer的详细用法

    C#播放声音的四种方法 第一种是利用DirectX 1.安装了DirectX SDK(有9个DLL文件).这里我们只用到MicroSoft.DirectX.dll和 Microsoft.Directx ...

  6. 在DOS下的DEBUG命令的详细用法

    在DOS下的DEBUG命令的详细用法 名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump ...

  7. __declspec关键字详细用法

    __declspec关键字详细用法 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的ANSI ...

  8. CString.Format的详细用法(转)

    CString.Format的详细用法(转) 在MFC程序中,使用CString来处理字符串是一个很不错的选择.CString既可以处理Unicode标准的字符串,也可以处理ANSI标准的字符串.CS ...

  9. IFRAM的详细用法

    IFRAM的详细用法:   IFRAM的详细用法:  <IFRAME>用于设置文本或图形的浮动图文框或容器. BORDER <IFRAME BORDER="3"& ...

随机推荐

  1. Autowired和Resource的区别

    Autowired是属于spring的注解,默认按类型装配,且依赖对象必须存在,如果允许为null,需要设置Autowired(required=false)   Resource属于javax,默认 ...

  2. 【代码段】Android Studio使用DatePicker选择日期

    布局文件中放一个TextView就好了 Java文件如下: public class TestDatePickerActivity extends AppCompatActivity { privat ...

  3. elasticsearch数据库使用

    elasticsearch的一个最为显著的优点:快速全文检索.关于elasticsearch 全文检索的原理,请看:https://blog.csdn.net/wolfcode_cn/article/ ...

  4. hash扩展长度攻击及hashdump使用

    摘自: 1.http://www.freebuf.com/articles/web/69264.html 2.https://www.cnblogs.com/pcat/p/5478509.html 0 ...

  5. hdu 1527威佐夫博弈

    //http://www.cnblogs.com/bo-tao/archive/2012/04/16/2452633.html #include<stdio.h> #include< ...

  6. Jeecg+fixflow,工作流框架分享

    工作流引擎使用fixflow. 动态表达使用jeecg. 不多说直接上源码. 注:本人使用的jdk为6.0.mysql.tomcat6.0 其中fixflow-expand 为eclips流程设计核心 ...

  7. 用JQuery实现选中select里面的option显示对应的div

    HTML: <select name=""  onchange="select(this)"> <option value="1&q ...

  8. 1.3-动态路由协议EIGRP②

    LAB3:Wildcard Mask in EIGRP (通过反掩码,控制运行EIGRP的接口的范围             作用:控制有哪些接口在运行EIGRP) ~~~~~~~~~~~~~~~~~ ...

  9. Nexus设备升级5.0方法

    1. 从该页面为您的设备下载适当的系统映像.然后将它解压缩到一个安全的文件夹. 2. 通过 USB 连接到您的计算机. 3. 使用下列的方法,在fastboot mode下启动设备: 使用 adb   ...

  10. java JDBC 连接数据库查询数据与直接使用sql的疑问

    JDBC 封装连接是好的前提: SystemAuthorizingRealm c = new SystemAuthorizingRealm(); conn = c.getConnection(); / ...