您的位置:首页 > Web前端 > JavaScript

extjs3.4 ComboBoxTree高级实现

2015-06-01 09:58 609 查看
ComboBoxTree.js

ComboBoxTree = Ext.extend(Ext.form.ComboBox,{
callback : Ext.emptyFn,
store : new Ext.data.SimpleStore({
fields : [],
data : [ {} ],
}),
editable : this.editable || false,
mode : 'local',
emptyText : this.emptyText || "请选择所属目录",
allowBlank : this.allowBlank || true,
triggerAction : 'all',
maxHeight : 200,
anchor : '99.5%',
displayField : 'text',
valueField : 'id',
tpl : "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",
selectedClass : '',
onSelect : Ext.emptyFn,
/**
* 根的名字
*/
rootText : this.rootText || 'rootText',
rootId : this.rootId || '_rootId',
/**
* 树的请求地址
*/
treeUrl : this.treeUrl,
tree : null,
constructor : function(cfg){
Ext.apply(this,cfg);

this.listeners = {
render : function(cmp){
if(!Ext.isEmpty(this.value)){
var sm = this.tree.getSelectionModel();
var loader = this.tree.loader;
loader.load(this.tree.root,function(node){
this.setValue(this.value);
},this);
}
},
scope : this
};

ComboBoxTree.superclass.constructor.call(this);
},
initComponent : function() {
this.tree = new Ext.tree.TreePanel({
height : 200,
scope : this,
autoScroll : true,
split : true,
root : new Ext.tree.AsyncTreeNode({
id : this.rootId,
text : this.rootText
}),
loader : new Ext.tree.TreeLoader({
url : this.treeUrl,
preloadChildren : true
})
});

/**
* 点击选中节点并回调传值
*/
this.tree.on('click', function(node) {
if (node.id != null && node.id != '') {
if (node.id != '_root') {
this.setValue(node.attributes[this.valueField]);
this.collapse();
} else {
Ext.Msg.alert("提示", "此节点无效,请重新选择!")
}
}
},this);

this.on('expand', function(){
this.tree.render('tree');
this.tree.expandAll();
});

ComboBoxTree.superclass.initComponent.call(this);
},
/**
* 修改之默认选中 重写findRecord 方法
* */
findRecord : function(prop, value){
var record;
if(this.tree.root.childNodes.length > 0){
this.tree.root.cascade(function(node){
if(node.attributes[prop] == value){
record = new Ext.data.Record();
record.set(this.valueField,node.attributes[this.valueField]);
record.set(this.displayField,node.attributes[this.displayField]);
return record;
}
},this);
}
return record;
}
});

调用方式:
new ComboBoxTree({
name : '',
hiddenName : '必写',
treeUrl:"请求路径",
fieldLabel : '可写可不写',
rootText:"可写可不写",
rootId : '可写可不写',
valueField : "id",
displayField:"text"
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  extjs combobox tree