Extjs4 实现下拉树

Extjs4 实现下拉树

• 
  

Java代码  

1. /*! 
2. * @author caizhiping 
3. * 下拉树 
4. */  
5. Ext.define('keel.TreeComboBox',{  
6.     extend : 'Ext.form.field.ComboBox',  
7.     alias: 'widget.keeltreecombo',  
8.     store : new Ext.data.ArrayStore({fields:[],data:[[]]}),  
9.     editable : false,  
10.     allowBlank:false,  
11.     listConfig : {resizable:true,minWidth:250,maxWidth:450},  
12.     _idValue : null,  
13.     _txtValue : null,  
14.     callback : Ext.emptyFn,  
15.     treeObj : new Ext.tree.Panel({  
16.                 border : false,  
17.                 height : 250,  
18.                 //width : 350,  
19.                 autoScroll : true,  
20.                 rootVisible: false,  
21.                 store:  new Ext.data.TreeStore({  
22.                             nodeParam : 'bmjg.bmjgdm',  
23.                             proxy: {  
24.                                 type: 'ajax',  
25.                                 url: '/fs/actions/bmjgtree!ajaxTreeforCombobox',  
26.                                 reader: 'json'  
27.                             },  
28.                             autoLoad : false,  
29.                             root: {  
30.                                   name : 'GT',  
31.                                   id: pbmjgdm,  
32.                                   expanded: true  
33.                             }  
34.                         })  
35.     }),  
36.     initComponent : function(){  
37.         this.treeRenderId = Ext.id();  
38.         this.tpl = "<tpl><div id='"+this.treeRenderId+"'></div></tpl>";       
39.         this.callParent(arguments);  
40.         this.on({  
41.             'expand' : function(){  
42.                 if(!this.treeObj.rendered&&this.treeObj&&!this.readOnly){  
43.                     Ext.defer(function(){  
44.                         this.treeObj.render(this.treeRenderId);  
45.                     },300,this);  
46.                 }  
47.             }  
48.         });  
49.         this.treeObj.on('itemclick',function(view,rec){  
50.             if(rec){  
51.                 this.setValue(this._txtValue = rec.get('text'));  
52.                 this._idValue = rec.get('id');  
53.                 //设置回调  
54.                 this.callback.call(this,rec.get('id'), rec.get('text'));  
55.                 //关闭tree  
56.                 this.collapse();  
57.             }  
58.         },this);  
59.     },  
60.     getValue : function(){//获取id值  
61.         return this._idValue;  
62.     },  
63.     getTextValue : function(){//获取text值  
64.         return this._txtValue;  
65.     },  
66.     setLocalValue : function(txt,id){//设值  
67.         this._idValue = id;  
68.         this.setValue(this._txtValue = txt);  
69.     }  
70. });  

 

 

调用：

 

Js代码  

1. /**下拉机构数*/  
2. var xltree=new keel.TreeComboBox({  
3.     fieldLabel : '部门机构',  
4.     name:'BMJGJC',  
5.     anchor:'95%',  
6.     //allowBlank:false,  
7.     callback:function(id,text){  
8.             //赋值给隐藏域  
9.             T_RY_NEW_FORM.getForm().findField("BMJGDM").setValue(id);  
10.     }  
11. });   

 

效果图：

在ExtJS官方下载包中为我们提供了下拉树类库TreePicker.js，实现效果图：

代码：

xtype: 'treepicker' ,              fieldLabel: '下拉树' ,              width: 400,              labelWidth: 60,              margin: '100 0 0 150' ,              displayField: 'text' ,              rootVisible: false ,              value: '' ,              minPickerHeight: 200,              store: Ext.create( 'Ext.data.TreeStore' ,{                  fields: [ 'id' , 'text' ],                  root: {                      text: '天朝部门' ,                      expanded: true                  },                  proxy: {                      type: 'ajax' ,                      url: 'app/data/tree.json' ,                      reader: {                          type: 'json'                      }                  }              })