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 grid取到数据而不显示的解决
- ExtJS下grid的一些属性说明
- Extjs在exlipse中设置自动提示的方法
- 常用Extjs工具:Extjs.util.Format使用方法
- extjs DataReader、JsonReader、XmlReader的构造方法
- 学习ExtJS(一) 之基础前提
- extjs 为某个事件设置拦截器
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- Extjs列表详细信息窗口新建后自动加载解决方法
- Extjs grid添加一个图片状态或者按钮的方法
- Extjs学习笔记之四 工具栏和菜单
- ComboBox 和 DateField 在IE下消失的解决方法
- extjs form textfield的隐藏方法
- MFC之ComboBox控件用法实例教程
- WinForm实现为ComboBox绑定数据源并提供下拉提示功能
- ExtJS 2.0实用简明教程之应用ExtJS
- ExtJS Store的数据访问与更新问题
- 不用写JS也能使用EXTJS视频演示
- Extjs改变树节点的勾选状态点击按钮将复选框去掉