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:'请选择一个排序方式'
});

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.把ExtjsComboBox样式应用到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

 

 

 

 
posted @ 2013-09-28 18:08 残星 阅读(...) 评论(...) 编辑 收藏