创建组件
var root = new Ext.tree.AsyncTreeNode({expanded:true,id:'0',text:'全部'});
var tree = new Ext.tree.TreePanel({
loader: loader,
id:'tree',
border :false,
editable:true,
rootVisible:true,
root:root,
listeners :{
'click':function(node,e)
{
var title = node.attributes.text;
treeNoid = node.attributes.id;
}
}
});
var treeCombo = new ComboBoxTree({
id:'treeCombo',
allowBlank : true,
width:200,
allowUnLeafClick:true,//只允许选择叶子
treeHeight:200,
emptyText:'请选择栏目',
fieldLabel:'栏目',
tree:tree
});
js 部分
var columnTitle = '上级栏目';
ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
passName : 'parentId',
fieldLabel : columnTitle,
allowUnLeafClick : true,
tpl: '<div id="treeTpl"></div>', //html代码
treeHeight : 180,
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
//Default
editable : false, // 禁止手写及联想功能
mode : 'local',
triggerAction : 'all',
maxHeight : 500,
selectedClass : '',
onSelect : Ext.emptyFn,
emptyText : '请选择...',
clearValue : function(){
if (this.passField){
this.passField.value = '';
}
this.setRawValue('');
},
setPassValue: function(passvalue){
if (this.passField)
this.passField.value = passvalue;
},
onTreeSelected : function(node){
},
treeClk : function(node, e){
if (!node.isLeaf()&& !this.allowUnLeafClick){
e.stopEvent();// 非叶子节点则不触发
return;
}
this.setValue(node.text);// 设置option值
this.collapse();// 隐藏option列表
if (this.passField)
this.passField.value = node.id;// 以树的节点ID传递
// 选中树节点后的触发事件
this.fireEvent('treeselected', node);
},
initComponent : function(){
ComboBoxTree.superclass.initComponent.call(this);
this.tree.autoScroll = true;
this.tree.height = this.treeHeight;
this.tree.containerScroll = false;
this.tplId = Ext.id();
// overflow:auto"
this.tpl = '<div id="' + this.tplId + '" style="' + this.treeHeight
+ '";overflow:hidden;"></div>';
this.addEvents('treeselected');
this.on('treeselected',this.onTreeSelected,this);
},
onViewClick : Ext.emptyFn,
assertValue : Ext.emptyFn,
listeners : {
'expand' : {
fn : function(){
if (!this.tree.rendered && this.tplId){
this.tree.render(this.tplId);
}
this.tree.show();
},
single : true
},
'render' : {
fn : function(){
this.tree.on('click', this.treeClk, this);
if (this.passName){
this.passField = this.getEl().insertSibling({
tag : 'input',
type : 'hidden',
name : this.passName,
id : this.passId || Ext.id()
}, 'before', true)
}
this.passField.value = this.passValue !== undefined
? this.passValue
: (this.value !== undefined ? this.value : '');
this.el.dom.removeAttribute('name');
}
},
'beforedestroy' : {
fn : function(cmp){
this.purgeListeners();
this.tree.purgeListeners();
}
}
}
});
Ext.reg('combotree', ComboBoxTree);
- 大小: 9.7 KB
分享到:
相关推荐
标题中的"ext 下拉树 ext2"指的是使用Ext JS库构建的一个特定版本的下拉树组件,其中"ext2"可能表示使用的是Ext JS的2.x版本。Ext JS是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序,它提供了一系列...
在IT领域,"ext 下拉树demo"是一个典型的前端开发示例,主要用于构建用户界面,特别是在数据管理和展示层级结构时。...对于前端开发者来说,掌握EXT下拉树的实现不仅能提升项目开发效率,还能增强对EXT框架的理解。
在本项目中,"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件:下拉树(ComboBox with Tree)和下拉表格(ComboBox with Grid)。这两种组件都是在输入框中展示可选择的列表,但呈现形式不同,下拉树以...
采用同步树原理,真正可以直接用的下拉树,,希望对你有帮助
下拉树(Dropdown Tree)是Ext JS中的一种特殊控件,它结合了下拉列表和树结构的功能,通常用于展示层次化的数据,并让用户从中选择一个或多个项。 下拉树的基本结构由两部分组成:一个文本框和一个关联的下拉面板...
【叨、校长】Ext 下拉树插件_ComboTree_xz 是一个基于ExtJS库的扩展组件,用于在用户界面中实现下拉树形选择功能。这个插件将传统的下拉框与树形结构相结合,提供了更加灵活和直观的数据选择方式,尤其适用于需要...
在Ext 4.0版本中,下拉树的实现主要依赖于几个关键组件:`Ext.tree.Panel`(树面板)、`Ext.form.field.Tree`(树形字段)以及可能用到的`Ext.data.TreeStore`(树存储)。下面我们将详细探讨这些知识点: 1. **Ext...
Ext下拉列表树是一种在ExtJS框架中实现的组件,它结合了下拉列表和树形结构的功能,为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见,尤其适用于需要展现多级...
利用Ext实现静态树(一次加载所有节点的树) 在今天的IT行业中,树形结构是一种非常常见的数据结构,尤其是在Web应用程序中。在这种情况下,我们通常会遇到一个问题,即如何将树形结构的数据加载到前台,以便用户...
ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...
【Ext 3.x + Ext 2.x 下拉树 Ext.ux.ComboBoxTree】是基于ExtJS框架的一个组件,它结合了下拉框(ComboBox)和树形控件(TreePanel)的功能,提供了一种用户友好的选择界面。在网页应用中,这种控件常用于展示层级...
首先声明:本控件并非原创,但是有我的劳动成果。附件中有使用说明文档。如有问题请给我留言。我当时下下来的时候是这样的:比如有“北京贸易公司”这个节点,输入BJ才能搜索到,修改后可以搜索到节点包含的任意字符...
创建下拉树需要使用`Ext.form.ComboBox`,并配置其`store`为树形数据的`TreeStore`,`displayField`为显示的字段,`valueField`为选定节点时返回的值。此外,可能还需要设置`typeAhead`、`triggerAction`等属性以...
7. **扩展控件**:可能需要创建一个新的组件类,继承自`Ext.form.field.ComboBox`,并覆盖或扩展其默认行为,以实现下拉树的功能。 8. **配置项**:例如,`displayField`定义显示字段,`valueField`定义值字段,`...
Ext3.0 原创下拉树 treeComoBox ,使用简单方便,亲身测试,绝对能用,该树可拉伸高度宽度,参数基本同ComoBox
1. **下拉树组件**:在ExtJS中,树形组件(TreePanel)用于展示层次结构的数据。它支持动态加载、拖放操作、节点展开和折叠等功能。而下拉树是将树形结构嵌入到下拉框中,通常用于选择一组相关的项目,比如文件夹...
在这个特定的情况下,我们讨论的是一个定制的下拉树菜单控件——ComboBoxTree,它在ExtJS4中实现了单选和多选功能,并且具备展开选中指定节点的能力。这个控件在实际项目中已经被广泛使用并证明了其稳定性和实用性,...
在ExtJS4中,多选下拉树(Multi Select Tree)是一种用户界面组件,它结合了下拉菜单和树形结构,允许用户从层级结构中选择多个项目。这个组件在数据管理、分类选择等场景中非常实用。 在实现多选下拉树时,我们...
在ExtJS中,下拉树是通过`Ext.form.field.Tree`类实现的,它继承自`Ext.form.field.ComboBox`,增加了树状结构的功能。`ComboTree.js`可能就是实现了这个功能的JavaScript文件,包含了一些定制化的代码或扩展。 ...
- **渲染:** 下拉树的视图部分由Ext.view.Tree实现,它将数据模型转化为可视化的树结构。 - **交互:** 用户选择节点时,可以选择单个或多个,选择结果会显示在输入框中,同时可以通过监听事件来处理用户的选中...