日期:2014-05-16 浏览次数:20355 次
?直接上代码:
?
Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor : function(cfg) { cfg = cfg || {}; Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({ maxHeight : 300, editable : false, mode : 'local', triggerAction : 'all', rootVisible : false, selectMode : 'all' }, cfg)); }, store : new Ext.data.SimpleStore({ fields : [], data : [[]] }), // 重写onViewClick,使展开树结点是不关闭下拉框 onViewClick : function(doFocus) { var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index); if (r) { this.onSelect(r, index); } if (doFocus !== false) { this.el.focus(); } }, tree : null, // 隐藏值 hiddenValue : null, getHiddenValue : function() { return this.hiddenValue; }, setHiddenValue : function(code, dispText) { this.setValue(code); Ext.form.ComboBox.superclass.setValue.call(this, dispText); this.hiddenValue = code; }, initComponent : function() { var _this = this; var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>" this.tree = new Ext.tree.TreePanel({ border : false, enableDD : false, enableDrag : false, rootVisible : _this.rootVisible || false, autoScroll : true, trackMouseOver : true, height : _this.maxHeight, lines : true, singleExpand : true, root : new Ext.tree.AsyncTreeNode({ id : _this.rootId, text : _this.rootText, leaf : false, border : false, draggable : false, singleClickExpand : false, hide : true }), loader : new Ext.tree.TreeLoader({ dataUrl : _this.url }) }); this.tree.on('click', function(node) { if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') { // if (node.parentNode && node.parentNode.attributes.id != '000000') { var dispText = node.text; var code = node.id; while (node.parentNode && node.parentNode.attributes.id != '000000') { if (node.parentNode.text != dispText) { dispText = node.parentNode.text + dispText; } node = node.parentNode; } _this.setHiddenValue(code, dispText); _this.collapse(); } }); this.on('expand', function() { this.tree.render(tplRandomId); }); Ext.ux.TreeCombo.superclass.initComponent.call(this); } }) Ext.reg("treecombo", Ext.ux.TreeCombo);
?
?使用示例:
?
{ xtype : 'treecombo', name : 'areaName', tplId : 'tree_tpl', rootVisible : true, rootText : '全国', url : 'loadArea', fieldLabel : '地区', maxHeight : 300, value : '全国', hiddenValue : '000000', anchor : '95%' }
?
不过通过formPanel.getForm().getValues()是获取不到treecombo的值的,需要自己手工调用
?
var treeValue = treeCombo.getHiddenValue(); treeCombo是上面控件的实例
然后通过Ext.apply(formJSON,{areaName:treeValue})对用formJSON中的显示值进行替换
http://raywithu.iteye.com/admin/blogs/1139509