treecombobox.js
// JavaScript Document
Ext.namespace('Ext.ux');
(function() {?
??? var createTreePanel = function(treeWidth, treeHeight, rootVisible, root) {?
??????? var treePanel = new Ext.tree.TreePanel({
??????????? root : root,?
??????????? rootVisible : rootVisible,?
??????????? floating : true,?
??????????? autoScroll : true,?
??????????? renderTo : Ext.getBody(),?
??????????? width : treeWidth || 150,?
??????????? height : treeHeight || 250
??????? });
??????? return treePanel;?
??? }?
?
??? var createStore = function(treePanelId,storeBaseParams, storeMethod,dataUrl, storeRoot, storeTotalProperty) {?
??????? var store = new Ext.data.JsonStore( {?
??????????? proxy : new Ext.data.HttpProxy( {?
??????????????? method : storeMethod || 'GET',?
??????????????? url : dataUrl?
??????????? }),?
??????????? baseParams : storeBaseParams || {?
??????????????? query : '',?
??????????????? start : 0?
??????????? },?
??????????? root : storeRoot || 'data',?
??????????? totalProperty : storeTotalProperty || "total",?
??????????? fields : [0],?
??????????? autoLoad : false,?
??????????? load : function(options) {?
??????????????? options.callback = function() {
??????????????? ??? var TreeJsonRoot='data';
??????????????? ??? if(storeRoot!=undefined && storeRoot.length>0) TreeJsonRoot=storeRoot;
????????????????? ??? ? Ext.getCmp(treePanelId).root.removeAll(true);
????????????????? ??? ? if(storeRoot!=undefined && storeRoot.length>0){
????????????????? ??? ? ??? ??? ??? Ext.getCmp(treePanelId).root.appendChild(this.reader.jsonData);
????????????????? ??? ? ??? ??? }else{
????????????????? ??? ? ??? ??? ??? Ext.getCmp(treePanelId).root.appendChild(this.reader.jsonData[TreeJsonRoot]);
????????????????? ??? ? ??? }
??????????????? };?
??????????????? return Ext.data.JsonStore.superclass.load.call(this, options);?
??????????? }?
??????? })?
??????? return store;?
??? }?
?
??? Ext.ux.TreeComboBox = Ext.extend(Ext.form.TwinTriggerField,{
??????? initComponent : function() {?
??????????? Ext.ux.TreeComboBox.superclass.initComponent.call(this);?
??????????? this.on('specialkey', function(f, e) {?
??????????????? if (e.getKey() == e.ENTER) {?
??????????????????? this.onTrigger2Click();?
??????????????? }?
??????????? }, this);
??? ??? ??? //this.on('keydown',this.filterTree,this);
??????????? this.treePanel = createTreePanel(this.treeWidth, this.treeHeight,this.rootVisible, this.root);?
??? ??? ??? //this.treePanel.hiddenPkgs=[];
??????????? this.treePanel.on('hide', this.onTreeHide, this);?
??????????? this.treePanel.on('show', this.onTreeShow, this);?
??????????? this.treePanel.on('click', this.onTreeNodeClick, this);
??????????? this.store = createStore(this.treePanel.id, this.storeBaseParams,?
??? ??? ??? this.storeMethod, this.dataUrl, this.storeRoot,
??? ??? ??? this.storeTotalProperty);????????????
?????????? /* this.treePanel.getTopToolbar().addItem(new Ext.ux.form.SearchField( {?
??? ??? ??? ??? width : this.treeWidth ? this.treeWidth : 220,?
??? ??? ??? ??? store : this.store?
??? ??? ??? }));*/
??? ??? ??? //this.treePanel.getBottomToolbar().addItem(new Ext.PagingToolbar({store:this.store}));?
??????????? this.resizer = new Ext.Resizable(this.treePanel.id, {?
??????????????? handles : 'se',?
??????????????? minWidth : 100,?
??????????????? minHeight : 80,?
??????????????? pinned : true?
??????????? });?
??????????? this.mon(this.resizer, 'resize', function(r, w, h) {?
??????????????? this.treePanel.setSize(w, h);?
??????????????? //this.treePanel.getTopToolbar().get(0).setSize(w - 10, 18);?
??????????? }, this);?
??????? },?
??????? trigger1Class : 'x-form-clear-trigger',?
??????? onTrigger1Click : function() {?
??????????? this.setRawValue('');?
??????????? this.setHiddenValue('');?
??????? },?
??????? onTrigger2Click : function() {?
??????????? this.treePanel.show();?
??????????? this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');?
??????? },?
??????? editable : true,?
??????? storeAutoLoad : true,?
??????? frstLoad : true,?
??????? onTreeShow : function() {?
??????????? Ext.getDoc().on('mousewheel', this.collapseIf, this);?
??????????? Ext.getDoc().on('mousedown', this.collapseIf, this);?
??????????? if (this.storeAutoLoad && this.frstLoad) {?
??????????????? this.store.load( {});?
??????????????? this.frstLoad = false;?
??????????? }?
??????? },?
??????? onTreeHide : function() {?
??????????? Ext.getDoc().un('mousewheel', this.collapseIf, this);?
??????????? Ext.getDoc().un('mousedown', this.collapseIf, this);?
??????? },?
??????? collapseIf : function(e) {?
??????????? if (!e.within(this.wrap) && !e.within(this.treePanel.getEl())) {?
??????????????? this.collapse();?
??????????? }?
??????? },?
??????? collapse : function() {?
??????????? this.treePanel.hide();?
??????? },
??????? showTree : function() {?
??????????? this.treePanel.show();?
??????? },
??????? validateBlur : function() {?
??????????? return !this.treePanel || !this.treePanel.isVisible();?
??????? },?
??????? setValue : function(v) {?
??????????? this.setRawValue(v);?
??????? },?
??????? getValue : function() {?
??????????? return this.getRawValue();?
??????? },?
??????? setHiddenValue : function(v) {?
??????????? return this.hiddenField.value = v;?
??????? },?
??????? getHiddenValue : function() {?
??????????? return this.hiddenField.value;?
??????? },?
??????? getHiddenId : function() {?
??????????? return this.hiddenField.id;?
??????? },?
??????? onTreeNodeClick : function(node, e) {?
??????????? this.setRawValue(node.text);?
??????????? this.hiddenField.value = node.id?
??????????? this.fireEvent('select', this, node);
??????????? if(this.emptyShow){
??????????? ??? if(this.getValue()!=''){
??????????? ??? ??? this.collapse();
??????????? ??? }
??????????? }else{
??????????? ??? this.collapse();?
??????????? }
???????????
??????? },?
??????? onRender : function(ct, position) {?
??????????? Ext.ux.TreeComboBox.superclass.onRender.call(this, ct,?
??????????????????? position);?
??????????? if (!this.hiddenField) {?
??????????????? this.hiddenField = this.getEl().insertSibling( {?
??????????????????? tag : 'input',?
??????????????????? type : 'hidden',?
??????????????????? name : this.name,?
??????????????????? value : this.hiddenValue,?
??????????????????? id : (this.hiddenId || this.name)?
??????????????? }, 'before', true);?
??????????????? this.getEl().dom.removeAttribute('name');?
??????????? }?
??????? },
??? ??? filterTree: function(t, e){
??? ??? ??? var text = t.getValue();
??? ??? ??? Ext.each(this.treePanel.hiddenPkgs, function(n){
??? ??? ??? ??? n.ui.show();
??? ??? ??? });
??? ??? ??? if(!text){
??? ??? ??? ??? this.treePanel.filter.clear();
??? ??? ??? ??? return;
??? ??? ??? }
??? ??? ??? this.treePanel.expandAll();
??? ??? ??? var re = new RegExp('^' + Ext.escapeRe(text), 'i');
??? ??? ??? this.treePanel.filter.filterBy(function(n){
??? ??? ??? ??? return !n.attributes.isClass || re.test(n.text);
??? ??? ??? });
??? ??? ??? // hide empty packages that weren't filtered
??? ??? ??? this.treePanel.hiddenPkgs = [];
??? ??? ??? var me = this.treePanel;
??? ??? ??? this.treePanel.root.cascade(function(n){
??? ??? ??? ??? if(!n.attributes.isClass && n.ui.ctNode.offsetHeight < 3){
??? ??? ??? ??? ??? n.ui.hide();
??? ??? ??? ??? ??? me.hiddenPkgs.push(n);
??? ??? ??? ??? }
??? ??? ??? });
??? ??? }
?
??? });?
})();?
Ext.reg('treecombobox',Ext.ux.TreeComboBox);
?
?
//调用
?????????????? xtype:'treecombobox',
??? ??? ??? ??? name:'corp',
??? ??? ??? ??? id:'Name',
??? ??? ??? ??? storeRoot:"data",
??? ??? ??? ??? storeTotalProperty:"total",?
??? ??? ??? ??? dataUrl:"/ah/tree",?
??? ??? ??? ??? root:new Ext.tree.TreeNode({
??? ??? ??? ??? }),
??? ??? ??? ??? listeners:{
??? ??? ??? ??? ??? "select":function(node,e){
??? ??? ??? ??? ??? }
??? ??? ??? ??? }