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

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;

}