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 题