在Extjs中構(gòu)造N級(jí)聯(lián)動(dòng)下拉的麻煩不少，需定制下拉數(shù)據(jù)并設(shè)定響應(yīng)事件。通過(guò)對(duì)Combo集合的封裝，無(wú)需自己配置Combo，只需設(shè)定數(shù)據(jù)和關(guān)聯(lián)層級(jí)，即可自動(dòng)構(gòu)造出一組支持正向和逆向過(guò)濾的聯(lián)動(dòng)下拉并獲取其中某一個(gè)的實(shí)例。
如：
數(shù)據(jù)：
Ext.test = 
{};
Ext.test.lcbdata = [{
level: 1, //下拉層級(jí)，可以是數(shù)字或字符串
type: '11', //所有父類別累加+本級(jí)類別
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]); //第二個(gè)參數(shù)的數(shù)組順序就是下拉的層級(jí)順序
var lv1 = lcb.getComboByLevel(1); //level值是1的ComboBox
var lv2 = lcb.getComboByLevel(2);
var lv3 = lcb.getComboByLevel(3);
實(shí)現(xiàn)：
Ext.custom = {};
/**//**
* 封裝了聯(lián)動(dòng)下拉的數(shù)據(jù)和數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換的Ext類
* 需要傳入數(shù)據(jù)：
* 1 聯(lián)動(dòng)下拉數(shù)據(jù)
* 2 combo數(shù)組(要求定義level屬性)或者level數(shù)組
*
* @author 楊一
* @date 2009-7-1
*/
Ext.custom.LinkComboBag = function(data, combos) {
this.data = data || [];
// 按照各個(gè)聯(lián)動(dòng)的順序傳入下拉數(shù)組
this.combos = combos || [];
// 持有各個(gè)聯(lián)動(dòng)數(shù)據(jù)的引用
this.stores = {};
// 構(gòu)造關(guān)聯(lián)部分
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"] = '請(qǐng)選擇';
combos[i]["displayField"] = 'text';
combos[i]["valueField"] = 'value';
combos[i]["triggerAction"] = 'all';
combos[i]["mode"] = 'local';
combos[i]["store"] = this.buildStore(combos[i].level);
// 回調(diào)函數(shù)
combos[i]["listeners"] = {
'beforeselect' : function(combo, record, index) {
// 找到當(dāng)前的下拉索引號(hào)
for (var k = 0; k < combos.length; k++) {
if (combos[k].level === combo.level)
break;
}
// 遍歷所有當(dāng)前下拉后的組件下拉
for (var j = k + 1; j < combos.length; j++) {
// 清空這些下拉的數(shù)據(jù)集
Ext.getCmp(combos[j].id).clearValue();
}
// 如果存在下一個(gè)下拉
if (k + 1 < combos.length)
// 把下一個(gè)下拉重新設(shè)定數(shù)據(jù)集
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];
}
/**//**
* 按照層級(jí)獲取下拉
*
* @param level
* 下拉層級(jí)
* @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;
}
/**//**
* 建立一個(gè)默認(rèn)的store并持有其引用
*
* @param level
* combo所屬的層次
* @return 建立的數(shù)據(jù)集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];
};
/**//**
* 根據(jù)制定的層級(jí)初始化一個(gè)combo使用的數(shù)據(jù)集 也可以采用Store:Filter的形式實(shí)現(xiàn)
*
* @param level
* combo所屬的層次
* @param type
* 選項(xiàng)類別
*/
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);
};
/**//**
* 根據(jù)制定的層級(jí)及父類別更新一個(gè)combo使用的數(shù)據(jù)集 也可以采用Store:Filter的形式實(shí)現(xiàn)
*
* @param level
* combo所屬的層次
* @param type
* 選項(xiàng)類別
*/
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);
};
/**//**
* 反向選擇，改變值，不改變數(shù)據(jù)集
*
* @param level
* combo所屬的層次
* @param type
* 選項(xiàng)類別
*/
Ext.custom.LinkComboBag.prototype.reverseSelect = function(level, type) {
//找到當(dāng)前組件索引號(hào)
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 楊一. 版權(quán)所有. 保留所有權(quán)利