Extjs ComboBox详解编程语言

var select_data=[['jyrq desc','预约日期'],['jyzt asc','处理标志'],['jyje desc','交易金额'],['dxjgdm asc','合作机构']]; 
var select_store = new Ext.data.SimpleStore({ 
    fields: ['key', 'value'], 
    data : select_data 
}); 
var orderBox = new Ext.form.ComboBox({ 
    hiddenName : 'select_order', 
    fieldLabel : '排序方式', 
    listWidth : 300, 
    store: select_store, 
    valueField : 'key', 
    displayField : 'value',//store字段中你要显示的字段，多字段必选参数，默认当mode为remote时displayField为undefine，当 select列表时displayField为”text” 
    mode: 'local',//因为data已经取数据到本地了，所以’local’,默认为”remote”，枚举完 
    width : 190, 
    typeAhead : true, 
    editable : true, 
    triggerAction : 'all', 
    resizable : true, 
    enableKeyEvents: true,  
    selectOnFocus:true,     
    forceSelection : true, 
    emptyText:'请选择一个排序方式' 
});

//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″/>

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

//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>

 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