自定义ExtJS控件之Ext下拉树和Ext下拉表格

在Ext官方的例子中只有下拉列表控件，但是在实际业务中只有下拉列表无法满足需求的，像下拉树和下拉表格都是很常见的控件，对于刚使用Ext的人来说，自定义一个控件好难，其实多读官方的源码有些事情就不会那么难了。下面是下拉树的代码：

[javascript] view plaincopy

1. Ext.define('ComboTreeBox',{  
2.     extend : 'Ext.form.field.ComboBox',  
3.       
4.     multiSelect : true,  
5.       
6.     createPicker : function(){  
7.         var me = this;  
8.           
9.         //创建树控件  
10.         var picker = Ext.create('Ext.tree.Panel', {  
11.             store: me.store,  
12.             rootVisible: false,  
13.              selModel: {  
14.                     mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'  
15.                 },  
16.             floating: true,  
17.             hidden: true,  
18.             focusOnToFront: false  
19.         });  
20.         //注册事件用于选择用户选择的值  
21.         me.mon(picker, {  
22.             itemclick: me.onItemClick,  
23.             refresh: me.onListRefresh,  
24.             scope: me  
25.         });  
26.           
27.         me.mon(picker.getSelectionModel(), {  
28.             beforeselect: me.onBeforeSelect,  
29.             beforedeselect: me.onBeforeDeselect,  
30.             selectionchange: me.onListSelectionChange,  
31.             scope: me  
32.         });  
33.         this.picker = picker;  
34.         return picker;  
35.     },  
36.       
37.     onItemClick: function(picker, record){  
38.         /* 
39.          * If we're doing single selection, the selection change events won't fire when 
40.          * clicking on the selected element. Detect it here. 
41.          */  
42.         var me = this,  
43.             selection = me.picker.getSelectionModel().getSelection(),  
44.             valueField = me.valueField;  
45.   
46.         if (!me.multiSelect && selection.length) {  
47.             if (record.get(valueField) === selection[0].get(valueField)) {  
48.                 // Make sure we also update the display value if it's only partial  
49.                 me.displayTplData = [record.data];  
50.                 me.setRawValue(me.getDisplayValue());  
51.                 me.collapse();  
52.             }  
53.         }  
54.     }  
55. });  

下拉树的代码很简单，只要集成Ext.form.field.ComboBox类，然后重写createPicker方法就可以了，同理下拉表格也是如此，下面是下拉表格的代码：

[javascript] view plaincopy

1. Ext.define('ComboGridBox',{  
2.     extend : 'Ext.form.field.ComboBox',  
3.       
4.     multiSelect : true,  
5.       
6.     createPicker : function(){  
7.         var me = this;  
8.           
9.         var picker = Ext.create('Ext.grid.Panel', {  
10.             title : '下拉表格',  
11.             store: me.store,  
12.             frame : true,  
13.             resizable : true,  
14.             columns : [{  
15.                 text : '#ID',  
16.                 dataIndex : 'id'  
17.             },{  
18.                 text : '名称' ,  
19.                 dataIndex : 'name'  
20.             },{  
21.                 text : '描述' ,  
22.                 dataIndex : 'desc'  
23.             }],  
24.             selModel: {  
25.                 mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'  
26.             },  
27.             floating: true,  
28.             hidden: true,  
29.             width : 300,  
30.             columnLines : true,  
31.             focusOnToFront: false  
32.         });  
33.         me.mon(picker, {  
34.             itemclick: me.onItemClick,  
35.             refresh: me.onListRefresh,  
36.             scope: me  
37.         });  
38.   
39.         me.mon(picker.getSelectionModel(), {  
40.             beforeselect: me.onBeforeSelect,  
41.             beforedeselect: me.onBeforeDeselect,  
42.             selectionchange: me.onListSelectionChange,  
43.             scope: me  
44.         });  
45.         this.picker = picker;  
46.         return picker;  
47.     },  
48.       
49.     onItemClick: function(picker, record){  
50.         /* 
51.          * If we're doing single selection, the selection change events won't fire when 
52.          * clicking on the selected element. Detect it here. 
53.          */  
54.         var me = this,  
55.             selection = me.picker.getSelectionModel().getSelection(),  
56.             valueField = me.valueField;  
57.   
58.         if (!me.multiSelect && selection.length) {  
59.             if (record.get(valueField) === selection[0].get(valueField)) {  
60.                 // Make sure we also update the display value if it's only partial  
61.                 me.displayTplData = [record.data];  
62.                 me.setRawValue(me.getDisplayValue());  
63.                 me.collapse();  
64.             }  
65.         }  
66.     },  
67.       
68.     matchFieldWidth : false,  
69.       
70.     onListSelectionChange: function(list, selectedRecords) {  
71.         var me = this,  
72.             isMulti = me.multiSelect,  
73.             hasRecords = selectedRecords.length > 0;  
74.         // Only react to selection if it is not called from setValue, and if our list is  
75.         // expanded (ignores changes to the selection model triggered elsewhere)  
76.         if (!me.ignoreSelection && me.isExpanded) {  
77.             if (!isMulti) {  
78.                 Ext.defer(me.collapse, 1, me);  
79.             }  
80.             /* 
81.              * Only set the value here if we're in multi selection mode or we have 
82.              * a selection. Otherwise setValue will be called with an empty value 
83.              * which will cause the change event to fire twice. 
84.              */  
85.             if (isMulti || hasRecords) {  
86.                 me.setValue(selectedRecords, false);  
87.             }  
88.             if (hasRecords) {  
89.                 me.fireEvent('select', me, selectedRecords);  
90.             }  
91.             me.inputEl.focus();  
92.         }  
93.         console.log(me.getValue());  
94.     },  
95.       
96.     doAutoSelect: function() {  
97.         var me = this,  
98.             picker = me.picker,  
99.             lastSelected, itemNode;  
100.         if (picker && me.autoSelect && me.store.getCount() > 0) {  
101.             // Highlight the last selected item and scroll it into view  
102.             lastSelected = picker.getSelectionModel().lastSelected;  
103.             itemNode = picker.view.getNode(lastSelected || 0);  
104.             if (itemNode) {  
105.                 picker.view.highlightItem(itemNode);  
106.                 picker.view.el.scrollChildIntoView(itemNode, false);  
107.             }  
108.         }  
109.     }  
110.       
111.       
112. });  

下拉表格也是继承了Ext.form.field.ComboBox这个类，重写了createPicker方法。

开发下拉树和下拉表格看起来so easy，只要研究透了Ext的运行机制，一切都会so easy

控件效果

实例下载

实例中的资源为myeclipse项目，导入即可运行，自己添加ext的js和css文件，实例中没有ext的基础文件。

下载地址：http://download.csdn.net/detail/leecho571/6398897