ExtJs之combobox详解.docVIP

HYPERLINK /hannover/archive/2011/01/01/1923684.htmlExtJs之combobox详解 1.服务器数据作为ComboBox的数据源 实例首先从服务器获取json数据： //cs后台代码，简单起见，示例而已，要主要字符串格式(新手注意，下面的代码放在类里面，不是放在方法里)public string ServerData=”[湖北,江西,安徽]“; //前台js介绍代码Ext.onReady(function(){var combo=new Ext.form.ComboBox({store:%=ServerData% gt;,//获取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和text2. 二维和多维数组：[[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的storevar 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中的idwidth:80//宽度});//html代码select id=”select”option value=”1″***/optionoption value=”2″博客园/optionoption value=”3″百度/optionoption value=”4″新浪/option/select //是不是超级简单？ 从 中不是也可以看出extjs的不同之处的，不过不明显！5.ComboBox的其他重要参数 1.valueField:”valuefield”//value值字段2.displayField：”field” //显示文本字段3.editable：false//false则不可编辑，默认为 true4.triggerActi