ExtJs之combobox

发布时间:2016-12-6 18:11:27 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"ExtJs之combobox",主要涉及到ExtJs之combobox方面的内容,对于ExtJs之combobox感兴趣的同学可以参考一下。

ExtJs之combobox详解 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动态加载问题    var moduleStore = new Ext.data.Store({         proxy: new Ext.data.HttpProxy({             url: 'getShenOrder.action' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的         }),         reader: new Ext.data.JsonReader({         totalProperty: "results",         root: 'list',         fields:['code','name']         })/*,         listeners: {             load: function() {              var combo = Ext.getCmp('ruleid');                 combo.setValue(combo.getValue());             }         }*/        });  var comb  = new Ext.form.ComboBox({  fieldLabel: '审核级别',  labelSeparator : ':',  id:"ruleid",  name:"ruleid",  baseCls:"x-plain",  store:moduleStore,  valueField:'code',  displayField:'name',  typeAhead: true,  mode: 'local',  triggerAction: 'all',  selectOnFocus:true,  editable:false,  readOnly: true,  listWidth: 105,                //设置数据显示框的长度  width:90,                      //设置下拉框的长度  hideTrigger:false // listeners: {  //为Combo添加select事件 //    select: function(combo, record, index) {   // 该事件会返回选中的项对应在 store中的 record值. index参数是排列号. //    } //    } }) moduleStore.load({params:{typeCode:targetcode}}); moduleStore.on('load',function(store,record,opts){   //为Store设置load事件         var combo = Ext.getCmp("ruleid");  if(p2==0){  var  firstValue  = record[0].data.code;//这种方法也可以获得第一项的值  combo.setValue(firstValue);//选中          }else{   combo.setValue(p2);   //根据审核顺序设置combo选中值  } }); // Ext.getCmp('ruleid').setValue(p2.toString()); 设置当前选中值Value //      应该在load时setValue(data)或者第一次combobox显示的是data的值 // Ext.getCmp('ruleid').setRawValue('一级审核');  设置显示的Text   <tr class="tr_show"> <td class="clsfth" width="30%" height="25"> <p style="margin-top: 0; margin-bottom: 0"><bean:message key="apparatus.supplier"/></p> </td> <td width="70%" height="25" colspan="2"> <select name="supplier" size="1" style="width: 6.8cm;" subid="s3" onchange="javascript:eoms.Box.doCombo(document.getElementById('s2'),'s3','','supplier');"> <option value=""><bean:message key="label.selall"/></option> <logic:iterate id="supplier" name="supplier" type="com.boco.eoms.apparatus.model.TawApClassMsg"> <option value="<bean:write name="supplier" property="id" scope="page"/>"><bean:write name="supplier" property="cname" scope="page"/></option> </logic:iterate> </select> </td> </tr>  实例操作:有时间在具体研究下,贴上比较全的代码   <tr> <td class="label" width="300" >测试1模板</td> </td> <td width="70%" height="25" colspan="2" > <select name="modelId2" id="s1" style="width: 6.8cm;" subid="s2" onchange="javascript:eoms.Box.doCombo(this,'s2','');"></select> </td> </tr> <tr> <td class="label" > 测试2作业名称 </td> <td width="70%" height="25" colspan="2"> <select name="necode" id="s2" style="width: 6.8cm;" subid="s3" onchange="javascript:eoms.Box.doCombo(this,'s3','','supplier');"></select> </td> </tr>  

上一篇:网站内容聚合之道:为流量还是为用户?
下一篇:spring中context:property-placeholder/元素

相关文章

关键词: ExtJs之combobox

相关评论