Ext.form.ComboBox 属性详解及使用方法介绍和级联使用

[转] http://cache.baidu.com/c?m=9f65cb4a8c8507ed4fece7631046893b4c4380146d96864968d4e414c4224604142db7e67a7e1104d3d82f2750f51218bded367035093db59ed58b40c0bb962d2d892c36671cf112539153bb8e1b65972fc710afb81897adf04584afa28782140cdd52756d80879c5b70459730a04961beec&p=8c7bd61f86cc47aa17bcc7710c64&user=baidu

Ext.form.ComboBox 属性详解（见注释）及使用方法
定义一个ComboBox：

Wayfoon.YearComb = new Ext.form.ComboBox({ 
    id:'cbid', 
    name:'year',//name只是改下拉的名称 
    hiddenName:'hyear',//提交到后台的input的name 
    width : 80, 
    store : Wayfoon.Year,//填充数据 
    emptyText : '请选择', 
    mode : 'local',//数据模式，local代表本地数据 
    readOnly : true,//是否只读 
    value : (new Date()).YEAR,//默认值,要设置为提交给后台的值，不要设置为显示文本 
    triggerAction : 'all',// 显示所有下列数据，一定要设置属性triggerAction为all 
    allowBlank : false,//不允许为空 
    valueField : 'value',//值 
    displayField : 'text',//显示文本 
    editable: false,//是否允许输入 
    forceSelection: true,//必须选择一个选项 
    blankText:'请选择'//该项如果没有选择，则提示错误信息 
});

注意：

id:'cbid',//作用不大，可以自动生成
name:'year',//name只是改下拉的名称，几乎没有作用
hiddenName:'hyear',//提交到后台的input的name，重要

使用firebug查看html代码， 以上代码生成html是

<div id="ext-gen279" class="x-form-field-wrap x-trigger-wrap-focus" style="width: 80px;"> 
<input id="hyear" type="hidden" name="hyear" value="01"/> 

<input id="cbid" class="x-form-text x-form-field x-form-focus" type="text" autocomplete="off" size="24" readonly="" style="width: 55px;"/> 

<img id="ext-gen280" class="x-form-trigger x-form-arrow-trigger" src="http://www.yibenzhang.com/JSFW/ext/resources/images/default/s.gif"/> 
</div>

可以看出一个下列选择 主要由三部分组成 两个input 和一个img(下拉的箭头)。例外 name属性没有起到作用。

combobox中要用到的数据：可以改成从数据库中读取数据

Wayfoon.Year = new Ext.data.SimpleStore({ 
    fields : ['value', 'text'], 
    data : [['2008', '2008'], ['2009', '2009']] 
});

如果要下列框级联，在combox 里面加上

listeners:{ 
            select:{ 
                fn:function(combo,record,index) { 
                    var store; 
                    if(record.get('value')=='广东') 
                    { 
                        store = Wayfoon.MMS.TypeStore5; 
                    } 
                    else if(record.get('value')=='广西') 
                    { 
                        store = Wayfoon.MMS.TypeStore51; 
                    } 
                    Ext.getCmp('city'+id).clearValue(); 
                    Ext.getCmp('city'+id).store = store; 
                    if(Ext.getCmp('city'+id).view){ 
                        Ext.getCmp('city'+id).view.setStore(store); 
                    } 
                    Ext.getCmp('city'+id).enable(); 

               } 
            } 
        }

比如省份和城市级联

//省份数据 
Wayfoon.MMS.TypeStore4 = new Ext.data.SimpleStore({ 
    fields : ['value', 'text'], 
    data : [['', '全部省份'], 
        ['广东', '广东'], ['广西', '广西'], ['黑龙江', '黑龙江'],['吉林', '吉林'],['陕西', '陕西'], 
        ['浙江', '浙江'],['江苏', '江苏'],['四川', '四川'],['湖北', '湖北'],['新疆', '新疆'], 
        ['云南', '云南'],['安微', '安微'],['福建', '福建'],['江苏', '江苏'],['山东', '山东'], 
        ['北京','北京']] 
}); 
//城市数据1 
Wayfoon.MMS.TypeStore5 = new Ext.data.SimpleStore({ 
    fields : ['value', 'text'], 
    data : [['', '全部城市'], ['深圳市', '深圳市'], ['广州市', '广州市']] 
}); 
//城市数据2 
Wayfoon.MMS.TypeStore51 = new Ext.data.SimpleStore({ 
    fields : ['value', 'text'], 
    data : [['', '全部城市'], ['桂林', '桂林'], ['山水', '山水']] 
}); 

//省份combo 
Wayfoon.Province=function(id){ 
    var comboProvince=({ 
        xtype : 'combo', 
        //name : 'combo-province', 
        readOnly : true, 
        triggerAction : 'all', 
        allowBlank : true, 
        width : 60, 
        store : Wayfoon.MMS.TypeStore4, 
        value : '', 
        //pageSize:10, 
        //typeAhead: true, 
        //resizable : true, 
        hiddenName : 'hComboProv', 
        displayField : 'text', 
        valueField : 'value', 
        mode : 'local', 
        emptyText : '选择省份', 
        listeners:{ 
            select:{ 
                fn:function(combo,record,index) { 
                    var store; 
                    if(record.get('value')=='广东') 
                    { 
                        store = Wayfoon.MMS.TypeStore5; 
                    } 
                    else if(record.get('value')=='广西') 
                    { 
                        store = Wayfoon.MMS.TypeStore51; 
                    } 
                    Ext.getCmp('city'+id).clearValue(); 
                    Ext.getCmp('city'+id).store = store; 
                    if(Ext.getCmp('city'+id).view){ 
                        Ext.getCmp('city'+id).view.setStore(store); 
                    } 
                    Ext.getCmp('city'+id).enable(); 

               } 
            } 
        } 
    }); 
 return comboProvince; 

} 

//城市combo 
Wayfoon.City=function(id){ 
    var comboCity=( 
    { 
        id:'city'+id, 
        xtype : 'combo', 
        readOnly : true, 
        triggerAction : 'all', 
        allowBlank : true, 
        width : 60, 
        store :  new Ext.data.Store(),//Wayfoon.MMS.TypeStore5, 
        value : '', 
        hiddenName : 'hComboCity', 
        displayField : 'text', 
        valueField : 'value', 
        mode : 'local', 
        emptyText : '选择城市'  
     }); 
    return comboCity; 

}