在Extjs中構造N級聯動下拉的麻煩不少，需定制下拉數據并設定響應事件。通過對Combo集合的封裝，無需自己配置Combo，只需設定數據和關聯層級，即可自動構造出一組支持正向和逆向過濾的聯動下拉并獲取其中某一個的實例。
如：
數據：
Ext.test = 
{};
Ext.test.lcbdata = [{
level: 1, //下拉層級，可以是數字或字符串
type: '11', //所有父類別累加+本級類別
text: 'text1',//顯示文本
value: '11'//值
},{
level: 1,
type: '12',
text: 'text2',
value: '12'
},{
level: 2,
type: '111',
text: 'text3',
value: '111'
},{
level: 3,
type: '1111',
text: 'text4',
value: '1111'
}];
使用：
var lcb = new Ext.custom.LinkComboBag(Ext.test.lcbdata, [1, 2, 3]); //第二個參數的數組順序就是下拉的層級順序
var lv1 = lcb.getComboByLevel(1); //level值是1的ComboBox
var lv2 = lcb.getComboByLevel(2);
var lv3 = lcb.getComboByLevel(3);
實現：
Ext.custom = {};
/**//**
* 封裝了聯動下拉的數據和數據結構轉換的Ext類
* 需要傳入數據：
* 1 聯動下拉數據
* 2 combo數組(要求定義level屬性)或者level數組
*
* @author 楊一
* @date 2009-7-1
*/
Ext.custom.LinkComboBag = function(data, combos) {
this.data = data || [];
// 按照各個聯動的順序傳入下拉數組
this.combos = combos || [];
// 持有各個聯動數據的引用
this.stores = {};
// 構造關聯部分
var thisObj = this;
// 初始化下拉
for (var i = 0; i < combos.length; i++) {
if(combos[i] instanceof Object){
}else{
combos[i] = {
level: combos[i]
}
}
combos[i].id = Ext.id();
combos[i]["xtype"] = 'combo';
combos[i]["editable"] = false;
combos[i]["emptyText"] = '請選擇';
combos[i]["displayField"] = 'text';
combos[i]["valueField"] = 'value';
combos[i]["triggerAction"] = 'all';
combos[i]["mode"] = 'local';
combos[i]["store"] = this.buildStore(combos[i].level);
// 回調函數
combos[i]["listeners"] = {
'beforeselect' : function(combo, record, index) {
// 找到當前的下拉索引號
for (var k = 0; k < combos.length; k++) {
if (combos[k].level === combo.level)
break;
}
// 遍歷所有當前下拉后的組件下拉
for (var j = k + 1; j < combos.length; j++) {
// 清空這些下拉的數據集
Ext.getCmp(combos[j].id).clearValue();
}
// 如果存在下一個下拉
if (k + 1 < combos.length)
// 把下一個下拉重新設定數據集
thisObj.change(combos[k + 1].level, record.get('type'));
thisObj.reverseSelect(combo.level, record.get('type'));
}
}
}
};
/**//**
* 按照索引獲取下拉
*
* @param index
* 下拉索引
* @return 組件下拉
*/
Ext.custom.LinkComboBag.prototype.getComboByIndex = function(index){
return this.combos[index];
}
/**//**
* 按照層級獲取下拉
*
* @param level
* 下拉層級
* @return 組件下拉
*/
Ext.custom.LinkComboBag.prototype.getComboByLevel = function(level){
for(var i=0;i<this.combos.length;i++){
if(this.combos[i].level == level)
return this.combos[i];
}
return null;
}
/**//**
* 建立一個默認的store并持有其引用
*
* @param level
* combo所屬的層次
* @return 建立的數據集store
*/
Ext.custom.LinkComboBag.prototype.buildStore = function(level) {
if (!this.stores[level])
this.stores[level] = new Ext.data.SimpleStore({
fields : ["type", "text", "value"],
sortInfo : {
field : "type",
direction : "ASC"
}
});
this.initData(level);
return this.stores[level];
};
/**//**
* 根據制定的層級初始化一個combo使用的數據集 也可以采用Store:Filter的形式實現
*
* @param level
* combo所屬的層次
* @param type
* 選項類別
*/
Ext.custom.LinkComboBag.prototype.initData = function(level) {
var reData = [];
var index = 0;
for (var i = 0; i < this.data.length; i++) {
if (this.data[i].level == level)
reData[index++] = [this.data[i].type, this.data[i].text,
this.data[i].value];
}
this.stores[level].loadData(reData, false);
};
/**//**
* 根據制定的層級及父類別更新一個combo使用的數據集 也可以采用Store:Filter的形式實現
*
* @param level
* combo所屬的層次
* @param type
* 選項類別
*/
Ext.custom.LinkComboBag.prototype.change = function(level, type) {
var reData = [];
var index = 0;
for (var i = 0; i < this.data.length; i++) {
if (this.data[i].level == level
&& this.data[i].type.substr(0, type.length) === type)
reData[index++] = [this.data[i].type, this.data[i].text,
this.data[i].value];
}
this.stores[level].loadData(reData, false);
};
/**//**
* 反向選擇，改變值，不改變數據集
*
* @param level
* combo所屬的層次
* @param type
* 選項類別
*/
Ext.custom.LinkComboBag.prototype.reverseSelect = function(level, type) {
//找到當前組件索引號
for (var k = 0; k < this.combos.length; k++) {
if (this.combos[k].level === level)
break;
}
//遍歷所有前面的組件
for(var j=k-1;j>=0;j--){
for (var i = 0; i < this.data.length; i++) {
if (this.data[i].level == this.combos[j].level
&& type.substr(0, type.length - 2*(k - j)) == this.data[i].type){
Ext.getCmp(this.combos[j].id).setValue(this.data[i].value);
}
}
}
};
@2008 楊一. 版權所有. 保留所有權利