EXTjS4自定义控件

Extjs combox动态加载数据自定义控件

 

通过前面的资料，我需要做一个加载部门的领导的combox，而且用到很多地方，于是自定义了一个combox组件代码如下：

LeaderCombox = Ext.extend(Ext.form.ComboBox, {
   fieldLabel : 'Label',
   fieldLabel : "审核人",
   width : 135,
   mode : 'local', // 直接从本地获得数据(已通过nativeStore.load()将数据加载到本地，不需要用
       // remote 再从服务器获取)
   name : "leader",
   // hiddenName : "enativeplace", //通过隐藏着值将value的值传提交到后台
   valueField : 'id',
   displayField : 'name',
   triggerAction : "all", // 设置下拉选择,如果没设置，选中一个之后，不能再重选其他的选项
   editable : false,
   emptyText : "请选择审核人..",
  url:null,
   initComponent : function() {
    var store = new Ext.data.Store({
     scope:this,
       proxy : new Ext.data.HttpProxy({
                scope:this,
          url : this.url
         }),
       reader : new Ext.data.ArrayReader({}, [{
            name : 'id'
           }, {
            name : 'name'
           }])

      })

    store.load();
    this.store = store;
    LeaderCombox.superclass.initComponent.call(this);
   }
});

使用的时候只需要如下方式即可，这样在每个需要的地方调用即可，很方便

new LeaderCombox({url:'combox.jsp'})

combox。jsp返回的数据形式如下：

[ ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']]

 

 

Java代码  

1. /**   
2.  * 韩飞   
3.  *    
4.  * @class TreeSelector   
5.  * @extends Ext.form.ComboBox   
6.  */    
7. TreeSelector = Ext.extend(Ext.form.ComboBox, {    
8.     /**   
9.      * 回调函数,用于传递选择的id，text属性   
10.      *    
11.      * @type   
12.      */    
13.     callback : Ext.emptyFn,    
14.     store : new Ext.data.SimpleStore({    
15.                 fields : [],    
16.                 data : [[]]    
17.             }),    
18.     editable : false,    
19.     mode : 'local',    
20.     emptyText : "请选择部门",    
21.     allowBlank : false,    
22.     blankText : "必须输入!",    
23.     triggerAction : 'all',    
24.     maxHeight : 200,    
25.     anchor : '95%',    
26.     displayField : 'text',    
27.     valueField : 'id',    
28.     tpl : "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",    
29.     selectedClass : '',    
30.     onSelect : Ext.emptyFn,    
31.     /**   
32.      * 根的名字   
33.      *    
34.      * @type String   
35.      */    
36.     rootText : '组织机构',    
37.     /**   
38.      * 树的请求地址   
39.      *    
40.      * @type String   
41.      */    
42.     treeUrl : 'system/organization/loadOrganizationTrees.action',    
43.     tree : null,    
44.     initComponent : function() {    
45.     
46.         this.tree = new Ext.tree.TreePanel({    
47.             height : 200,    
48.             scope : this,    
49.             autoScroll : true,    
50.             split : true,    
51.             root : new Ext.tree.AsyncTreeNode({    
52.                         expanded : true,    
53.                         id:'o',    
54.                         text : this.rootText    
55.                     }),    
56.     
57.             loader : new Ext.tree.TreeLoader({    
58.                         url : this.treeUrl    
59.     
60.                     }),    
61.             rootVisible : true    
62.                 // ,    
63.                 /*   
64.                  * listeners : { scope : this, 'click' : function(node) {// 单击事件   
65.                  * if (node.id != null && node.id != '') {   
66.                  *    
67.                  * this.callback.call(this, node.id, node.text);   
68.                  *    
69.                  * this.collapse();   
70.                  *  } } }   
71.                  */    
72.             });    
73.         var c = this;    
74.         /**   
75.          * 点击选中节点并回调传值   
76.          */    
77.         this.tree.on('click', function(node) {    
78.                     if (node.id != null && node.id != '') {    
79.                         if (node.id != 'o') {    
80.                             c.callback.call(this, node.id, node.text);    
81.     
82.                             c.collapse();    
83.                         }else{    
84.                         Ext.Msg.alert("提示","此节点无效，请重新选择!")    
85.                         }    
86.     
87.                     }    
88.                 })    
89.     
90.         this.on('expand', function() {    
91.                     this.tree.render('tree');    
92.                     this.tree.expandAll();    
93.                 });    
94.     
95.         TreeSelector.superclass.initComponent.call(this);    
96.     }    
97.   
98. })