Ext4实现combotree
实现代码:
Ext.override(Ext.data.TreeStore, { load: function(options) { options = options || {}; options.params = options.params || {}; var me = this, node = options.node || me.tree.getRootNode(), root; // If there is not a node it means the user hasnt defined a rootnode yet. In this case lets just // create one for them. if (!node) { node = me.setRootNode({ expanded: true }); } if (me.clearOnLoad) { node.removeAll(false); } Ext.applyIf(options, { node: node }); options.params[me.nodeParam] = node ? node.getId() : 'root'; if (node) { node.set('loading', true); } return me.callParent([options]); } });Ext.define('Ext.ux.ComboTree',{ extend : "Ext.form.field.ComboBox", alias: 'widget.combotree', requires : ["Ext.tree.Panel"], initComponent : function() { var self = this; self.myValue = ''; Ext.apply(self, { fieldLabel : self.fieldLabel, labelWidth : self.labelWidth }); self.callParent(); }, getValue:function(){ var self = this; return self.myValue; }, createPicker : function() { var self = this; var store = Ext.create('Ext.data.TreeStore',{ proxy: { type: 'ajax', actionMethods:'POST', url: self.url, extraParams:{ name:'test', all:self.all } }, listeners:{ load:function(){ self.oldValue = self.myValue.split(','); self.oldText = self.getRawValue().split(','); if (self.oldText[0]==''){self.oldText=[]} if (self.oldValue[0]==''){self.oldValue=[]} } } }); self.picker = new Ext.tree.Panel({ height : 300, autoScroll : true, floating : true, focusOnToFront : false, shadow : true, ownerCt : this.ownerCt, useArrows : true, store : store, rootVisible : false, listeners:{ itemclick:function(me, node, index){ if (node.get('checked')!=null){ var checked = !node.get('checked'); if (self.multiple){ node.set('checked',checked); var records = self.picker.getView().getChecked(), names = [], values = []; if (self.oldValue.length>0){ names = self.oldText; values = self.oldValue; } Ext.Array.each(records, function(rec) { var b = true; for (var i=0;i<self.oldValue.length;i++){ if (self.oldValue<i> == rec.get('id')){ b = false; break; } } if (b){ names.push(rec.get('text')); values.push(rec.get('id')); } }); }else{ var records = self.picker.getView().getSelectionModel().getSelection()[0], names = [], values = []; Ext.Array.each(self.picker.getView().getChecked(),function(rec){ rec.set('checked',false); }); node.set('checked',checked); if (checked){ names.push(node.get('text')); values.push(node.get('id')); }else{ names = []; values = []; } } self.myValue = values.join(','); self.setValue(values.join(','));// 显示值 self.setRawValue(names.join(','));// 隐藏值 } } }, tbar:[self.textField=Ext.create('Ext.form.field.Text',{ fieldLabel:'筛选', width:self.width - 95, labelWidth:40, listeners:{ scope: this, specialkey: function(text, e) { if (e.getKey() == e.ENTER) { self.reLoad(); } } } }),{ xtype:'button',// icon:'images/icons/zoom.png', iconCls:'find', handler:function(){ self.reLoad(); } }] }); return self.picker; }, reLoad:function(){ var store = this.getPicker().getStore(); store.setProxy({ type: 'ajax', actionMethods:'POST', url: this.url, extraParams:{ name:'test', all:this.all, query:this.textField.getValue() } }); store.load(); }, alignPicker : function() { var me = this, picker, isAbove, aboveSfx = '-above'; if (this.isExpanded) { picker = me.getPicker(); if (me.matchFieldWidth) { picker.setWidth(me.bodyEl.getWidth()); } if (picker.isFloating()) { picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl isAbove = picker.el.getY() < me.inputEl.getY(); me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx); picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx); } } }, onTrigger1Click: function() { this.myText = ''; this.myValue = ''; this.oldValue = []; this.oldText = []; this.setValue(''); this.setRawValue(''); var records = this.getPicker().getView().getChecked(); Ext.Array.each(records,function(rec){ rec.set('checked',false); }); }, displayField: 'text', editable:false, queryMode: 'local', trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger', trigger2Cls: Ext.baseCSSPrefix + 'x-form-trigger', valueField: 'id'});Ext.onReady(function(){ var comb = Ext.create('Ext.ux.ComboTree',{ width : 270, fieldLabel : '行政区划', url:'getDic', //ajax请求地址 labelWidth : 60, renderTo:'testDiv', multiple:true //是否可以多选，默认false });});