extjs4.1下改combobox爲treecombo 並帶有check

1、功能描述:

最近用戶要求在combobox選擇填入時,能夠在樹結構中選擇節點,並保存和修改。

2、代碼展示:

Ext.define("HgTreeCheckCombo", {
extend : "Ext.form.field.ComboBox",
alias : 'widget.hgtreecheckcombo',
requires : [],
multiSelect : true,
autoScroll : true,
checkModel : '',
treeplanname : '',
pid : '',
comdisplayField : '',
comvalueField : '',
initComponent : function() {
var cfg = this.cfg || {};
var isrootVisible = cfg.isrootVisible || false;
Ext.apply(this, {
editable : false,
queryMode : 'local',
displayField : this.comdisplayField,
valueField : this.comvalueField,
select : Ext.emptyFn
});
this.displayField = this.displayField || 'text', this.treeid = Ext.String
.format('tree-combobox-{0}', Ext.id());


this.tpl = Ext.String.format('<div id="{0}"></div>', this.treeid);
var me = this, checkrecode = [];
this.tree = Ext.create(this.treeplanname, {
pid : me.pid,
height : 300,
autoScroll : true
});
this.tree.on('checkchange', function(node, check) {
var tree = this;
var checkModel = me.checkModel;
if (check) {
checkrecode.push(node);
}else{
checkrecode.pop(node);
}
if (checkModel == 'single') {
me.setValue(node);
me.collapse();
} else if (checkModel == 'multiple') {
if (me.multiSelect) {
me.setValue(checkrecode);
}
}
});


me.on('expand', function() {
if (!this.tree.rendered) {
var treestore = this.tree.getStore(),node;

//在修改時,通過現在combo顯示的真實值,在展開combo時,tree的相應節點要被選中
if(!Ext.isEmpty(me.getValue())){
value = Ext.Array.from(me.getValue());
for(i=0,len = value.length; i < len; i++){
node = treestore.getNodeById(value[i]);
if(node){
node.set("checked", true);
checkrecode.push(node);
}
}
}
this.tree.render(this.treeid);
}
});

//創建一個Ext.data.store,因爲普通的store裏有一個方法,這樣在修改時可以找到你選擇的記錄內容,這個store的結果要和treestore的結果一樣
this.store = Ext.create("BmzdStore", {
autoLoad : true,
proxy : {
extraParams : {
pid : me.pid
},
type : 'ajax',
api : {
read : './pa/bmzd!childlist.html'
},
reader : {
type : 'json',
root : 'bmzds',
successProperty : 'success'
}
}
});
// this.store = this.tree.getStore();
this.callParent(arguments);
},
constructor : function(config) {
HgTreeCheckCombo.superclass.constructor
.call(this, config);
}
});


有不足之處請指點

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章