ExtJs 3 自定义combotree

/*** 自定义下拉树，支持初始化值时自动定位树节点。* 还没有考虑性能问题。继承自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, //根节点是否可选，默认为falsefolderSelectable: true, //目录是否可选，默认为trueleafSelectable: true, //叶子是否可选，默认为trueshowFullPath: 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);},//privateinitTree: 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的buganimate: 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,
});

var combo = this;this.tree = new Ext.tree.TreePanel({renderTo: this.treeId,useArrows: false,autoScroll: true,height: this.height,  //fix IEanimate: true,enableDD: false,containerScroll: true,border: false,dataUrl: this.dataUrl,[color=red]tbar: [{text:'清空',xtype:'button',iconCls:'reset',handler:function(){combo.setValue(null);}}],[/color]loader: this.loader,root: this.root,rootVisible: this.rootVisible