/**
* 自定义下拉树，支持初始化值时自动定位树节点。
* 还没有考虑性能问题。继承自Ext.form.ComboBox也很浪费。
* 代码中的cu.get()是自定义的异步请求方法。
* @author Linzongxue
* @create_date 2011-12-13
*/
Ext.ux.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
//树的配置项
dataUrl: null, //获取树所有节点的url
//通过id获取某个节点的id全路径的url，返回值的格式应该是：parentId1/parentId2/parentId3/../节点id
//如果不设置这个值，下拉树不会自动定位节点并在初始化时显示文本
nodePathUrl: null,
loader: null,
root: {},
rootVisible: false,
//树的选择模式
rootSelectable: false, //根节点是否可选，默认为false
folderSelectable: true, //目录是否可选，默认为true
leafSelectable: true, //叶子是否可选，默认为true
showFullPath: false, //是否显示全路径
rootValue: undefined, //根节点的值（通常根节点的取值与普通节点的取值不一样，如果一样则不需要设置此值）
//原combo类的配置项
store: new Ext.data.SimpleStore({fields:[],data:[[]]}),
mode: 'local',
triggerAction: 'all',
editable: false,
forceSelection: true,
tree: null, //树控件，在expand方法中初始化
//private: 用于防止combo收缩，在树的事件中控制此属性值
preventCollapse: false,
initComponent: function(){
this.treeId = Ext.id();
this.height = this.height || 200;
this.tpl = String.format('<tpl for="."><div id="{0}" style="height:{1}px"></div></tpl>', this.treeId, this.height);
Ext.ux.ComboBoxTree.superclass.initComponent.call(this);
},
setValue: function(value){
if (Ext.isObject(value)){ //点击树节点时的选择
this.doSetValue(value);
}
else{ //只是设置一个值，从后台获取这个值的路径，并在树中选中这个节点
//console.log(value);
if (!this.tree) this.initTree();
if (value === this.tree.root.id ||
(Ext.isDefined(this.rootValue) && value === this.rootValue)){ //根节点
this.tree.root.select();
this.doSetValue(this.root);
return;
}
var url = this.nodePathUrl;
if (!url){
this.doSetValue({id: value});
return;
}
cu.get(url, {id: value}).done(function(path){//从后台发起请求获取id路径
path = '/' + this.root.id + (path.indexOf('/') == 0 ? '' : '/') + path;
var comboTree = this;
this.tree.selectPath(path, 'id', function(success, node){
comboTree.doSetValue(success ? node : null);
});
}, this);
}
},
//private:设置值，参数value应该是一个对象
doSetValue: function(value){
var id = value ? value.id : '';
var text = value ? value.text : '';
if (value && (value.loader || value.attributes)){ //是树节点
var isRootNode = (value.id == this.tree.root.id);
if (isRootNode && Ext.isDefined(this.rootValue)){
id = this.rootValue;
}
if (this.showFullPath){
text = isRootNode ? '/' : value.getPath('text').replace('/' + this.tree.root.text, '');
}
}
this.value = id;
if(this.hiddenField){
this.hiddenField.value = id; //设置表单域
}
this.lastSelectionText = text;
this.el.dom.value = text; //显示的值
this.fireEvent('select', this, value);
},
getValue : function(){
return Ext.isDefined(this.value) ? this.value : '';
},
//取得选中的树节点
getValueNode: function(){
return this.tree ? this.tree.getSelectionModel().getSelectedNode() : null;
},
getText: function(){
return this.lastSelectionText || '';
},
reload: function(){
if (!this.tree) return;
var node = this.tree.getSelectionModel().getSelectedNode();
var path = node ? node.getPath() : null;
this.tree.getLoader().load(this.tree.root, function(){
if (path) {
this.tree.selectPath(path);
}
}, this);
this.preventCollapse = true;
},
//private: 根据preventCollapse属性判断是否要收缩
collapse: function(){
if (this.preventCollapse){
this.preventCollapse = false;
return;
}
Ext.ux.ComboBoxTree.superclass.collapse.call(this);
},
//private:
expand : function(){
Ext.ux.ComboBoxTree.superclass.expand.call(this);
if (!this.tree){
this.initTree();
}
},
//private:
destroy: function(){
if (this.tree && this.tree.rendered) this.tree.destroy();
Ext.form.ComboBox.superclass.destroy.call(this);
},
//private
initTree: function(){
if (!this.list){ //必须先初始化列表，在一开始就设置了combotree的值时尤其重要，发现这个问题花了半天时间
this.initList();
}
//设置this.preventCollapse=true，防止combo收缩
var enableCollapse = function(){this.preventCollapse = false;};
//设置this.preventCollapse=false，允许combo收缩
var disableCollapse = function(){this.preventCollapse = true;};
this.tree = new Ext.tree.TreePanel({
renderTo: this.treeId,
useArrows: false,
autoScroll: true,
height: this.height, //修复IE的bug
animate: true,
enableDD: false,
containerScroll: true,
border: false,
dataUrl: this.dataUrl,
loader: this.loader,
root: this.root,
rootVisible: this.rootVisible,
// bbar:[
// '->', {text: '刷新', handler: this.reload, iconCls: 'icon-refresh', scope: this} //由于宽度问题取消此功能
// ],
listeners: {
click: function(node){
disableCollapse();
if (node == this.tree.root){ //选中根节点
if (!this.rootSelectable) return;
}
else if (!node.isLeaf()){ //选中目录节点
if (!this.folderSelectable) return;
}
else{ //选中叶子节点
if (!this.leafSelectable) return;
}
//先选择节点，再设置value，让getNodeValue方法在select事件中取到正确的值
node.select();
this.setValue(node);
enableCollapse();
},
//展开和收缩节点时防止combo收缩
beforeexpandnode: disableCollapse,
beforecollapsenode: disableCollapse,
beforeload: disableCollapse,
//节点加载和展开后允许combo收缩
load: enableCollapse,
expandnode: enableCollapse,
scope: this
}
});
}
});
Ext.reg('combotree', Ext.ux.ComboBoxTree);
/**************** 下面是一个使用例子 ***********************/
new Ext.ux.ComboBoxTree({
fieldLabel:'父菜单',
hiddenName: 'parentId',
value: this.modifyId ? '' : this.parentMenu.id,
height: 180,
dataUrl: 'sys/menu/getMenus.do',
nodePathUrl: 'sys/util/getEntityIdPath.do?c=sys.entity.Menu',
root: {id:'root', text:'根菜单', expanded: true},
rootVisible: true,
rootSelectable: true,
rootValue: null,
showFullPath: true,
allowBlank: false,
});
分享到：
，因为才开始使用ExtJs没多久，很多应用细节还没机会去尝试。我觉得你的方法也挺好了，添加“清空”的同时顺便再加上一个“刷新”树节点的控制都不错。
相关推荐
Extjs4.2自定义ComboTree
3. **创建Combotree组件**：使用ExtJS的`Ext.create`方法，指定组件类型为`Ext.tree.Panel`，并配置相关属性，如store（数据源）、displayField（显示字段）、width、height等。 4. **配置TreeStore**：为Combotree...
为了更好地适应特定业务需求，ExtJS支持自定义组件的扩展与封装。本文将重点探讨ExtJS中组件扩展的两种主要层次及其实践要点。 #### 二、常见错误及原因分析 在使用ExtJS进行组件扩展时，开发人员常常会遇到一些...
### ExtJs4 实现下拉树选择框 ComboTree #### 概述 在现代Web应用开发中，ExtJS 是一个非常强大的JavaScript库，用于构建复杂的客户端应用程序。它提供了丰富的组件库，使得开发者能够轻松地创建出功能丰富且交互性...
ExtJS下拉树是一种在Web应用中常用的交互组件，它结合了下拉框和树形结构的优点，使得用户可以...总的来说，ExtJS下拉树是通过组合ExtJS的基础组件和自定义代码来实现的，它提供了一种高效的方式来展示和操作层级数据。
总之，`ComboTree_xz.js`的实现展示了如何在ExtJS环境中创建自定义组件，将复杂的UI需求转化为可复用的代码。通过对这个文件的学习，可以深入理解ExtJS的组件系统和数据绑定机制，提升在企业级Web应用开发中的能力。...
- `component`: 通用组件，可以自定义行为和外观。 - `container`: 容器组件，可以包含其他组件，支持多种布局模式。 - `panel`: 功能强大的容器，可以包含标题、工具栏、边框等。 - `tabpanel`: 包含多个选项卡...
3. 自定义扩展：说明如何基于ExtJS的源码，为ComboBox和Tree组件添加新的功能或行为，实现combotree。 4. 配置项和事件：列出ComboBox和Tree组件的关键配置项，以及如何监听和处理用户交互事件。 5. 渲染和模板：...
6. **Form**：提交表单使用Ajax，添加 ComboTree 字段，以及表单验证，确保数据的完整性和正确性。 与 ExtJS 相比，jQuery EasyUI 的优势在于其轻量化和易用性。由于基于jQuery，EasyUI 的学习曲线相对平缓，开发者...
menu.json json格式数据，模拟从后台返回的json数据 PinyinFilter.js：提供进行拼音过滤所需要的函数 TreeFilter.js：自定义的类，提供树结点的过滤功能（依赖于...comboTreeTest.js：comboTree.html运行用的JS文件
- **Form（表单）**：Combobox（组合框），Combotree（组合树），Combogrid（组合网格），Numberbox（数字框），Datetimebox（日期时间框），Calendar（日历），Numberspinner（数值微调器），Timespinner（时间微调...