在最近的一个项目中,想利用Ext combobox实现一个动态的下拉树,无奈官方中也没有例子,网上很多例子也是坑爹的,
, 决定自已修改 然后实现一个动态的下拉树,废话少说 ,看代码:
下面是应用
树的加载 ,采用动态加载 需要的才加载上来,
![Ext Combobox 动态下拉树实现 - 枫 - IT or 挨踢](https://i-blog.csdnimg.cn/blog_migrate/8fa144294a389c487ccdbcec920b0918.gif)
Ext.ns('Boat.UI');
// 树形下拉框
Boat.UI.TreeCombox = Ext.extend(Ext.form.ComboBox, {
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择...',
treeConfig : {
border : false,
autoScroll : true,
height : 200
},
initComponent : function() {
this.hiddenName = this.name;
Ext.apply(this.tree, this.treeConfig);
this.tpl = '<div id="tree-' + this.id + '"></div>';
Boat.UI.TreeCombox.superclass.initComponent.call(this);
this.on('expand', this.expandtree, this);
this.tree.on('click', this.clicktree, this);
},
onViewClick : Ext.emptyFn,
assertValue : Ext.emptyFn,
expandtree : function() {
this.tree.render('tree-' + this.id);
this.tree.expand();
},
clicktree : function(node) {
this.setValue(node);
this.collapse();
//如果要需求是单独叶节点可选时 可这样做
/*if (node.isLeaf()) {
this.setValue(node);
this.collapse();
}*/
},
setValue : function(v) {
this.hiddenField.value = v.id;
Ext.form.ComboBox.superclass.setValue.call(this, v.text);
this.value = v.id;
},
onDestroy : function() {
this.un('expand', this.expandtree, this);
Ext.destroy(this.tree);
Boat.UI.TreeCombox.superclass.onDestroy.call(this);
}
});
Ext.reg('treecombobox', Boat.UI.TreeCombox);
// 树形下拉框
Boat.UI.TreeCombox = Ext.extend(Ext.form.ComboBox, {
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : false,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择...',
treeConfig : {
border : false,
autoScroll : true,
height : 200
},
initComponent : function() {
this.hiddenName = this.name;
Ext.apply(this.tree, this.treeConfig);
this.tpl = '<div id="tree-' + this.id + '"></div>';
Boat.UI.TreeCombox.superclass.initComponent.call(this);
this.on('expand', this.expandtree, this);
this.tree.on('click', this.clicktree, this);
},
onViewClick : Ext.emptyFn,
assertValue : Ext.emptyFn,
expandtree : function() {
this.tree.render('tree-' + this.id);
this.tree.expand();
},
clicktree : function(node) {
this.setValue(node);
this.collapse();
//如果要需求是单独叶节点可选时 可这样做
/*if (node.isLeaf()) {
this.setValue(node);
this.collapse();
}*/
},
setValue : function(v) {
this.hiddenField.value = v.id;
Ext.form.ComboBox.superclass.setValue.call(this, v.text);
this.value = v.id;
},
onDestroy : function() {
this.un('expand', this.expandtree, this);
Ext.destroy(this.tree);
Boat.UI.TreeCombox.superclass.onDestroy.call(this);
}
});
Ext.reg('treecombobox', Boat.UI.TreeCombox);
下面是应用
{ x : 30,
y : 35,
xtype : 'treecombobox', //上面注册的 treecombobox
name:'parentId', //提交到后台得数据
tree : categorytree //指定要加载的树
}
y : 35,
xtype : 'treecombobox', //上面注册的 treecombobox
name:'parentId', //提交到后台得数据
tree : categorytree //指定要加载的树
}
树的加载 ,采用动态加载 需要的才加载上来,
var treeLoader = new Ext.tree.TreeLoader({
dataUrl : './Category/getTreeCategory.action',
baseParams : {}
});
var treenode = new Ext.tree.AsyncTreeNode({
id : 'root',
text : '类别',
leaf : false
});
/**
* treeloader 加载之前根据参数 parendId动态加载树节点
*/
treeLoader.on('beforeload', function(loader, node) {
loader.baseParams.parentId = (node.attributes.id == 'root'
? 0
: node.attributes.id);
})
var categorytree = new Ext.tree.TreePanel({
animate : true,
border : false,
loader : treeLoader,
root : treenode
});
dataUrl : './Category/getTreeCategory.action',
baseParams : {}
});
var treenode = new Ext.tree.AsyncTreeNode({
id : 'root',
text : '类别',
leaf : false
});
/**
* treeloader 加载之前根据参数 parendId动态加载树节点
*/
treeLoader.on('beforeload', function(loader, node) {
loader.baseParams.parentId = (node.attributes.id == 'root'
? 0
: node.attributes.id);
})
var categorytree = new Ext.tree.TreePanel({
animate : true,
border : false,
loader : treeLoader,
root : treenode
});
![Ext Combobox 动态下拉树实现 - 枫 - IT or 挨踢](http://img.ph.126.net/Z4ubtqwaY2bnKTokseDMJQ==/635851972406270991.jpg)