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;

}