1.服务器数据作为ComboBox的数据源 实例
首先从服务器获取json数据:

//cs后台代码,简单起见,示例而已,要主要字符串格式(新手注意,下面的代码放在类里面,不是放在方法里)
public string  ServerData=”['湖北','江西','安徽']“;

//前台js介绍代码
Ext.onReady(function(){
var combo=new Ext.form.ComboBox({
store:<%=ServerData%>,//获取ServerData的string值, 不要用”"引起来,否则就不是object数据,而是字符串,这是一个很巧妙的关键点:把服务器的字符串转化为js的object数据,

emptyText:’请 选择一个省份….’,
applyTo: ’combo’
});
});

//前台html代码
<input type=”text” id=”combo” size=”20″/>
我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据。
2.ComboBox的数据源store格式详解
在前面的例子里面,我们一直给 ComboBox的数据源store赋值一维数组,其实store支持多维和Store.data.Store类型。

//下面就几种数据以代码举例说明
1.一维数组:["江 西","湖北"],值同时赋给ComboBox的value和text
2. 二维和多维数组:[["one","bbar","111"],["two","tbar","222"]], 第一维和第二维分别赋值给value和text,其他维忽略
3.store类型:包括 GroupingStore, JsonStore, SimpleStore.
//我们分三步走:
//第一步:提供数据:
var data=[[' 湖北','hubei'],['江西','jiangxi'],['安徽','anhui']];
//第二步:导入到store中:
var store = new Ext.data.SimpleStore({
fields: ['chinese', 'english'],
data : data
});
//第三步 :把store托付给comboBox的store
var combo = new Ext.form.ComboBox({
store: store,
displayField:’english’,//store字段中你要显示的字段,多字段必选参数,默认当mode为remote时displayField为undefine,当 select列表时displayField为”text”
mode: ’local’,//因为data已经取数据到本地了,所以’local’,默认为”remote”,枚举完
emptyText:’请选择一个省 份…’,
applyTo: ’combo’
});

3.ComboBox的value获取
添加listeners事件:

//ComboBox的事件很多(api),我们无法一一讲解,但是我们可以举一反三,select事件就是其中典型的一 个
listeners:{
“select”:function(){
alert(Ext.get(“combo”).dom.value);   //获取id为combo的值
}
}
//这里我们提供了一种不是很好的方法,在此不做过多停留
4.把Extjs的ComboBox样式应用到select的下拉框中去

transform:id//用于转换样式的,TimeField作为ComboBox的子类也有此属性

核心代码:

//js代码
var ExtSelect=new Ext.form.ComboBox({
transform:”select”,//html中的id
width:80//宽度
});
//html代码
<select id=”select”>
<option value=”1″>***</option>
<option value=”2″>博客园</option>
<option value=”3″>百度</option>
<option value=”4″>新浪</option>
</select>

//是不是超级简单?    从 中不是也可以看出extjs的不同之处的,不过不明显!
5.ComboBox的其他重要参数

1.valueField:”valuefield”//value值字段
2.displayField:”field” //显示文本字段
3.editable:false//false则不可编辑,默认为 true
4.triggerAction:”all”//请设置为”all”,否则默认 为”query”的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为”all”的话,每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name,请一定要注意
6.typeAhead:true,//延时查询,与下面的参数配合
7.typeAheadDelay:3000,//默认250

6.ComboBox使用时注意

combo这个控件是需要绑定一个Store数据源才能使用的,
因此,在数据绑定中 combo需要指定两个比较关键的属性displayField和valueField
displayField指定一个Store的某一个列 名,也就是Store的fields指定的内容
而valueField,则是实际combo返回的值,displayField是指示显示的
如 果valueField不指定也行,不过返回值就成了displayField

7.combobox动态加载问题

  1  var moduleStore = new Ext.data.Store({
  2
  3         proxy: new Ext.data.HttpProxy({
  4             url: 'getShenOrder.action' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的
  5
  6         }),
  7
  8         reader: new Ext.data.JsonReader({
  9
 10         totalProperty: "results",
 11
 12         root: 'list',
 13
 14         fields:['code','name']
 15
 16         })/*,
 17
 18         listeners: {
 19
 20             load: function() {
 21
 22                 var combo = Ext.getCmp('ruleid');
 23
 24                 combo.setValue(combo.getValue());
 25
 26             }
 27
 28         }*/
 29
 30        });
 31
 32
 33
 34  var comb  = new Ext.form.ComboBox({
 35
 36     fieldLabel: '审核级别',
 37
 38     labelSeparator : ':',
 39
 40     id:"ruleid",
 41
 42     name:"ruleid",
 43
 44     baseCls:"x-plain",
 45
 46     store:moduleStore,
 47
 48     valueField:'code',
 49
 50     displayField:'name',
 51
 52     typeAhead: true,
 53
 54     mode: 'local',
 55
 56     triggerAction: 'all',
 57
 58     selectOnFocus:true,
 59
 60     editable:false,
 61
 62     readOnly: true,
 63
 64     listWidth: 105,                //设置数据显示框的长度
 65
 66     width:90,                      //设置下拉框的长度
 67
 68     hideTrigger:false
 69
 70 //    listeners: {  //为Combo添加select事件
 71
 72 //          select: function(combo, record, index) {   // 该事件会返回选中的项对应在 store中的 record值. index参数是排列号.
 73
 74 //          }
 75
 76 //          }
 77
 78 })
 79
 80
 81
 82 moduleStore.load({params:{typeCode:targetcode}});
 83
 84 moduleStore.on('load',function(store,record,opts){   //为Store设置load事件    var combo = Ext.getCmp("ruleid");
 85
 86     if(p2==0){
 87
 88     var  firstValue  = record[0].data.code;//这种方法也可以获得第一项的值
 89
 90     combo.setValue(firstValue);//选中
 91
 92          }else{
 93
 94      combo.setValue(p2);   //根据审核顺序设置combo选中值
 95
 96     }
 97
 98 });
 99
100
101
102 //    Ext.getCmp('ruleid').setValue(p2.toString()); 设置当前选中值Value
103
104 //       应该在load时setValue(data)或者第一次combobox显示的是data的值
105
106 //    Ext.getCmp('ruleid').setRawValue('一级审核');  设置显示的Text

转:http://www.lzgame.com/bbs/dv_rss.asp?s=xhtml&boardid=5&id=817&page=1

转载于:https://www.cnblogs.com/zhangwei595806165/archive/2012/12/10/2811026.html

ExtJs之combobox详解相关推荐

  1. Extjs Form用法详解(适用于Extjs5)

    为什么80%的码农都做不了架构师?>>>    Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Fo ...

  2. Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面

    Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面 Extjs 中的按钮元素 { xtype: 'buttongroup', title: '打印', items: [ me. ...

  3. Extjs Window用法详解 2 打印具体应用

    Extjs 中的按钮元素 { xtype: 'buttongroup', title: '打印', items: [ me.tsbDel = Ext.create('Ext.button.Button ...

  4. ExtJS 4 组件详解

    欢迎加入我的ExtJS交流群 – 透视ExtJS 群号 256700289 入群暗号 Zen ExtJS 4 的应用界面是由很多小部件组合而成的,这些小部件被称作"组件(Component) ...

  5. Extjs TreePanel API详解

    转自:http://web.qhwins.com/CSS-JS-XML/2011091312092944999107.html config定义{  animate : Boolean,  conta ...

  6. ExtJS 4.2 教程-08:布局系统详解

    ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...

  7. Ext.form.ComboBox 属性详解及使用方法介绍和级联使用

    [转] http://cache.baidu.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c4224604142db ...

  8. ext核心API详解

    http://hi.baidu.com/j2me/profile 1 EXT核心API详解(一)-Ext 1 EXT核心API详解(二)-Array/Date/Function/Number/Stri ...

  9. DELPHI 中 Window 消息大全使用详解

    Window 消息大全使用详解 导读: Delphi是Borland公司的一种面向对象的可视化软件开发工具. Delphi集中了Visual C++和Visual Basic两者的优点:容易上手.功能 ...

最新文章

  1. 使用Docker的macvlan为容器提供桥接网络及跨主机通讯
  2. 什么原因导致挖掘机老自动熄火憋车熄火?
  3. mxd 对象继承法则
  4. C++语言基础 例程 设计模式简介
  5. java值传递和引用传递的题目_Java 值传递和引用传递
  6. 迟到的 cocoapod 版本适配 之网利宝
  7. django 1.8 官方文档翻译: 8-3 点击劫持保护
  8. arp扫描工具_ARP扫描与ARP欺骗--Python的Scapy/Kamene模块学习之路
  9. php 百分比,小数2位
  10. [python]凯撒密码简单方法
  11. 区分级数收敛和数列收敛
  12. 【c语言】两个栈实现一个队列
  13. python报时功能_Python(PyS60)做的简单语音整点报时的实现
  14. 中国农业大学计算机考研拟录取名单,2019中国农业大学硕士考研研究生拟录取名单...
  15. Windows学习总结(1)——win10系统最新快捷键汇总
  16. 修改Keil MDK的背景为黑底或护眼(绿色)
  17. A Comprehensive Survey on Graph Neural Networks--图神经网络综合研究
  18. DNS服务器未响应是什么意思
  19. 经典四大排序(动图实现)
  20. 公司酒场被劝“你不喝就不拿我当朋友”,用4种拒酒话术,特管用

热门文章

  1. [转] Sublime Text3 配置 NodeJs 环境
  2. 【程序员眼中的统计学(12)】相关与回归:我的线条如何?
  3. Linux 下发邮件的方式
  4. 【VMCloud云平台】SCOM配置(十五)-启用SCOM日志审计(ACS)
  5. Spring管理Hibernate
  6. 病毒——隐藏鸟 系统文件夹不见了
  7. 面试题 02.05. 链表求和
  8. java如何恢复视图_Java - 如何用reformation+Moshi创建回收站视图_java_酷徒编程知识库...
  9. 金蝶移动bos开发教程_求助临沂金蝶k3,kis,eas软件各版本优势
  10. delay 芯片时序output_set_input_delay/set_output_delay