45. ExtJS ComboBox 下拉列表详细用法
转自: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 下拉列表详细用法的更多相关文章
- ExtJS ComboBox 下拉列表详细用法
ExtJS ComboBox 下拉列表详细用法 标签: combobox 2015-06-14 23:23 5171人阅读 评论(2) 收藏 举报 分类: ExtJS(32) 目录(?)[+] ...
- oracle中to_date详细用法示例(oracle日期格式转换)
这篇文章主要介绍了oracle中to_date详细用法示例,包括期和字符转换函数用法.字符串和时间互转.求某天是星期几.两个日期间的天数.月份差等用法 TO_DATE格式(以时间:2007-11-02 ...
- MFC中ComboBox控件用法
MFC ComboBox 一.入门篇 ComboBox (组合框)控件很简单,可以节省空间.从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的.用户可以从一个预先定义的列表里选择一个选项 ...
- Linux定时对日志批量打包Shell脚本及定时任务crontab 详细用法
一.需求背景 因此次项目的生产环境中部署了多套系统,每天会产生大量的日志(数百GB的量),侵占了服务器宝贵的存储资源空间.为了有效缓解服务器存储压力,考虑通过Linux的Shell脚本结合cr ...
- C#播放声音的四种方法 +AxWindowsMediaPlayer的详细用法
C#播放声音的四种方法 第一种是利用DirectX 1.安装了DirectX SDK(有9个DLL文件).这里我们只用到MicroSoft.DirectX.dll和 Microsoft.Directx ...
- 在DOS下的DEBUG命令的详细用法
在DOS下的DEBUG命令的详细用法 名称 解释 格式 a (Assemble) 逐行汇编 a [address] c (Compare) 比较两内存块 c range address d (Dump ...
- __declspec关键字详细用法
__declspec关键字详细用法 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的ANSI ...
- CString.Format的详细用法(转)
CString.Format的详细用法(转) 在MFC程序中,使用CString来处理字符串是一个很不错的选择.CString既可以处理Unicode标准的字符串,也可以处理ANSI标准的字符串.CS ...
- IFRAM的详细用法
IFRAM的详细用法: IFRAM的详细用法: <IFRAME>用于设置文本或图形的浮动图文框或容器. BORDER <IFRAME BORDER="3"& ...
随机推荐
- ls 命令还能这么玩?看一下这 20 个实用范例
Linux中一个基本命令是ls.没有这个命令,我们会在浏览目录条目时会遇到困难.这个命令必须被每个学习Linux的人知道. ls是什么 ls命令用于列出文件和目录.默认上,他会列出当前目录的内容.带上 ...
- BZOJ3124: [Sdoi2013]直径 (树形DP)
题意:给一颗树 第一问求直径 第二问求有多少条边是所有直径都含有的 题解:求直径就不说了 解第二问需要自己摸索出一些性质 任意记录一条直径后 跑这条直径的每一个点 如果以这个点不经过直径能到达最远的 ...
- illuminate/routing 源码分析之注册路由
我们知道,在 Laravel 世界里,外界传进来一个 Request 时,会被 Kernel 处理并返回给外界一个 Response.Kernel 在处理 Request 时,会调用 illumina ...
- Linux文件/目录,权限相关
查看权限 命令 # ls -l filename 结果 -rw-r--r-- l root root 27 11-10 14:50 filename 解析: -rw-r--r-- --共10位 第1位 ...
- Python字符串(Python学习笔记02)
字符串 Python 3 中的字符串可以使用双引号或单引号标示,如果字符串出现引号,则可以使用 \ 来去除引号标示字符串的作用. 几种字符串的表示方法: str1 = "hello" ...
- java诗词横版--转为竖版
import java.util.Arrays; /* 诗句横版转成竖版输出 */public class PrintPoem { public static void main(String[] a ...
- shrink&split
shrink将分片数按因子缩减.hard link segment文件.因缩减前后hash一致,不需要rehash.如:0 ,1 , 2, 3, 4, 5, 6, 7, 8.9个分片缩减成3个:0 [ ...
- Tensorflow word2vec+manage experiments
Lecture note 5: word2vec + manage experiments Word2vec Most of you are probably already familiar wit ...
- [luoguP2680] 运输计划(lca + 二分 + 差分)
传送门 暴力做法 50 ~ 60 枚举删边,求最大路径长度的最小值. 其中最大路径长度运用到了lca 我们发现,求lca的过程已经不能优化了,那么看看枚举删边的过程能不能优化. 先把边按照权值排序,然 ...
- 欧拉回路输出(DFS,不用回溯!)Watchcow POJ 2230
Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 8109 Accepted: 3551 Special Judge D ...