EXT公共控件之带树形结构的ComboBox

这个类是参考了网上的一些资料完成的，大部分代码是别人所写，我只是把它拿到了我自己的EXT公共控制库中而已，具体示例如下：

var areaComboTree = new Ext.ux.ComboBoxTree({ name : name, hiddenName : hiddenName, valueField : hiddenName, fieldLabel : labelName, emptyText : emptyText, clickMode : 2, tree : { xtype : 'treepanel', rootVisible : true, loader : new Ext.tree.TreeLoader({ dataUrl : 'getAreaNodeAction.action' }), root : new Ext.tree.AsyncTreeNode({ id : rootNodeID, text : emptyText }), listeners : { beforeload : function(node) { this.getLoader().baseParams.areaId = node.id; } } }, selectNodeModel : 'leaf', listWidth : 300 });

 

效果图如下：

 

源代码如下：

 

WebControl.TreeCombox = function(){ this.treeId = Ext.id() + '-tree'; this.maxHeight = arguments[0].maxHeight || arguments[0].height || this.maxHeight; this.tpl = new Ext.Template('<tpl for="."><div style="height:' + this.maxHeight + 'px"><div id="' + this.treeId + '"></div></div></tpl>'); this.store = new Ext.data.SimpleStore({ fields : [], data : [[]] }); this.selectedClass = ''; this.mode = 'local'; this.triggerAction = 'all'; this.onSelect = Ext.emptyFn; this.editable = false; this.fieldLabel = arguments[0].fieldLabel; this.emptyText = ''; this.renderTo = ''; this.clickMode = arguments[0].clickMode || 0;// 非叶节点是否允许被选 this.selectNodeModel = arguments[0].selectNodeModel || 'exceptRoot'; Ext.ux.ComboBoxTree.superclass.constructor.apply(this, arguments); } Ext.extend(WebControl.TreeCombox, Ext.form.ComboBox, { expand : function() { Ext.ux.ComboBoxTree.superclass.expand.call(this); if (!this.tree.rendered) { this.tree.height = this.maxHeight; this.tree.border = false; this.tree.autoScroll = true; if (this.tree.xtype) { this.tree = Ext.ComponentMgr.create(this.tree, this.tree.xtype); } this.tree.render(this.treeId); var combox = this; this.tree.on('click', function(node) { var isRoot = (node == combox.tree.getRootNode()); var selModel = combox.selectNodeModel; if (this.clickMode == 0) // 非叶节点是否允许被选 { var isLeaf = node.isLeaf(); if (isRoot && selModel != 'all') { return; } else if (selModel == 'folder' && isLeaf) { return; } else if (selModel == 'leaf' && !isLeaf) { return; } } combox.setValue(node); combox.collapse(); combox.fireEvent("selectnode"); }); var root = this.tree.getRootNode(); if (!root.isLoaded()) root.reload(); } }, setValue : function(node) { var text = node.text; this.lastSelectionText = text; if (this.hiddenField) { this.hiddenField.value = node.id; } Ext.form.ComboBox.superclass.setValue.call(this, text); this.value = node.id; }, getValue : function() { return typeof this.value != 'undefined' ? this.value : ''; } });