Ext.form.ComboBox 表格下拉最终版本

总终效果如下:



源码:

1. /**
2.  * 下拉表格ComboBoxGrid
3.  * @extend Ext.form.ComboBox
4.  *
5.  * @author MSN/Email:onebodysoftware@hotmail.com
6.  */
7. ComboBoxGrid = function(cfg) {
8.     Ext.apply(this, cfg);
9.     ComboBoxGrid.superclass.constructor.call(this, {
10.         editable : false, // 禁止手写及联想功能
11.         mode : 'local',
12.         triggerAction : 'all',
13.         maxHeight : 500,
14.         selectedClass : '',
15.         onSelect : Ext.emptyFn,
16.         emptyText : '请选择...',
17.         gridWidth:600,
18.         gridHeight : 180,
19.         listAlign : 'tr-br',
20.         listWidth : 300,
21.         resizable : false,
22.         grid:new MainGrid({
23.             id:Ext.id(),
24.             height : this.gridHeight || 180,
25.             width :this.gridWidth || 600,
26.             cm:this.cm,
27.             sm:this.sm,
28.             store:this.store,
29.             detailActList:this.detailActList
30.         })
31.     });
32. };
33. Ext.extend(ComboBoxGrid, Ext.form.ComboBox, {
34.     gridClk : function(grid, rowIndex, e) {
35.         var record = grid.getStore().getAt(rowIndex);
36.         var idValue = record.get(this.valueField);
37.         var displayValue = record.get(this.hiddenName);
38.         this.setRawValue(idValue);
39.         this.setValue(displayValue);
40.         this.collapse();
41.         this.fireEvent('gridselected', grid.getRecord(rowIndex));
42.     },
43.     initLayout : function() {
44.         this.grid.autoScroll = true;
45.         this.grid.height = this.gridHeight;
46.         this.grid.containerScroll = false;
47.         this.grid.border = false;
48.         this.listWidth = this.grid.width + 3;
49.     },
50.     initComponent : function() {
51.         ComboBoxGrid.superclass.initComponent.call(this);
52.         this.initLayout();
53.         this.tplId = Ext.id();
54.         this.tpl = '<div id="' + this.tplId + '" style="height:' + (this.gridHeight || 180)
55.                 + '";overflow:hidden;"></div>';
56.         //Add Event
57.         this.addEvents('gridselected');
58.     },
59.     listeners : {
60.         'expand' : {
61.             fn : function() {
62.                 if (!this.grid.rendered && this.tplId) {
63.                     this.initLayout();
64.                     this.grid.render(this.tplId);
65.                     //                    this.store.reload();
66.                     if (this.store.getCount() == 0) {
67.                         this.store.add(new Ext.data.Record([{}]));
68.                     }
69.                     this.grid.on('rowclick', this.gridClk, this);
70.                 }
71.                 this.grid.show();
72.             }
73.         },
74.         'render' : {
75.             fn : function() {
76.             }
77.         },
78.         'beforedestroy' : {
79.             fn : function(cmp) {
80.                 this.purgeListeners();
81.                 this.grid.purgeListeners();
82.             }
83.         },
84.         'collapse' : {
85.             fn : function(cmp) {
86.                 /**
87.                  *  防止当store的记录为0时不出现下拉的状况
88.                  */
89.                 if (this.grid.store.getCount() == 0) {
90.                     this.store.add(new Ext.data.Record([{}]));
91.                 }
92.             }
93.         }
94.     }
95. });

持续改进中...