]>
Commit | Line | Data |
---|---|---|
42842986 DM |
1 | Ext.define('PVE.form.ComboGrid', { |
2 | extend: 'Ext.form.field.ComboBox', | |
3 | alias: ['widget.PVE.form.ComboGrid'], | |
4 | ||
5 | // this value is used as default value after load() | |
6 | preferredValue: undefined, | |
7 | ||
8 | computeHeight: function() { | |
9 | var me = this; | |
10 | var lh = PVE.Utils.gridLineHeigh(); | |
11 | var count = me.store.getTotalCount(); | |
12 | return (count > 10) ? 10*lh : 26+count*lh; | |
13 | }, | |
14 | ||
15 | // hack: allow to select empty value | |
16 | // seems extjs does not allow that when 'editable == false' | |
17 | onKeyUp: function(e, t) { | |
18 | var me = this; | |
19 | var key = e.getKey(); | |
20 | ||
21 | if (!me.editable && me.allowBlank && !me.multiSelect && | |
22 | (key == e.BACKSPACE || key == e.DELETE)) { | |
23 | me.setValue(''); | |
24 | } | |
25 | ||
26 | me.callParent(arguments); | |
27 | }, | |
28 | ||
29 | // copied from ComboBox | |
30 | createPicker: function() { | |
31 | var me = this, | |
32 | picker, | |
33 | menuCls = Ext.baseCSSPrefix + 'menu', | |
34 | ||
35 | opts = Ext.apply({ | |
36 | selModel: { | |
37 | mode: me.multiSelect ? 'SIMPLE' : 'SINGLE' | |
38 | }, | |
39 | floating: true, | |
40 | hidden: true, | |
41 | ownerCt: me.ownerCt, | |
42 | cls: me.el.up('.' + menuCls) ? menuCls : '', | |
43 | store: me.store, | |
44 | displayField: me.displayField, | |
45 | focusOnToFront: false, | |
46 | height: me.computeHeight(), | |
47 | pageSize: me.pageSize | |
48 | }, me.listConfig, me.defaultListConfig); | |
49 | ||
50 | // NOTE: we simply use a grid panel | |
51 | //picker = me.picker = Ext.create('Ext.view.BoundList', opts); | |
52 | picker = me.picker = Ext.create('Ext.grid.Panel', opts); | |
53 | ||
54 | // pass getNode() to the view | |
55 | picker.getNode = function() { | |
56 | picker.getView().getNode(arguments); | |
57 | }; | |
58 | ||
59 | me.mon(picker, { | |
60 | itemclick: me.onItemClick, | |
61 | refresh: me.onListRefresh, | |
62 | show: function() { | |
63 | picker.setHeight(me.computeHeight()); | |
64 | me.syncSelection(); | |
65 | }, | |
66 | scope: me | |
67 | }); | |
68 | ||
69 | me.mon(picker.getSelectionModel(), 'selectionchange', me.onListSelectionChange, me); | |
70 | ||
71 | return picker; | |
72 | }, | |
73 | ||
74 | initComponent: function() { | |
75 | var me = this; | |
76 | ||
77 | if (me.initialConfig.editable === undefined) { | |
78 | me.editable = false; | |
79 | } | |
80 | ||
81 | Ext.apply(me, { | |
82 | queryMode: 'local', | |
83 | matchFieldWidth: false | |
84 | }); | |
85 | ||
86 | Ext.applyIf(me, { value: ''}); // hack: avoid ExtJS validate() bug | |
87 | ||
88 | Ext.applyIf(me.listConfig, { width: 400 }); | |
89 | ||
90 | me.callParent(); | |
91 | ||
92 | me.store.on('beforeload', function() { | |
93 | if (!me.isDisabled()) { | |
94 | me.setDisabled(true); | |
95 | me.enableAfterLoad = true; | |
96 | } | |
97 | }); | |
98 | ||
99 | // hack: autoSelect does not work | |
100 | me.store.on('load', function(store, r, success, o) { | |
101 | if (success) { | |
102 | me.clearInvalid(); | |
103 | ||
104 | if (me.enableAfterLoad) { | |
105 | delete me.enableAfterLoad; | |
106 | me.setDisabled(false); | |
107 | } | |
108 | ||
109 | var def = me.getValue() || me.preferredValue; | |
110 | if (def) { | |
111 | me.setValue(def, true); // sync with grid | |
112 | } | |
113 | var found = false; | |
114 | if (def) { | |
115 | if (Ext.isArray(def)) { | |
116 | Ext.Array.each(def, function(v) { | |
117 | if (store.findRecord(me.valueField, v)) { | |
118 | found = true; | |
119 | return false; // break | |
120 | } | |
121 | }); | |
122 | } else { | |
123 | found = store.findRecord(me.valueField, def); | |
124 | } | |
125 | } | |
126 | ||
127 | if (!found) { | |
128 | var rec = me.store.first(); | |
129 | if (me.autoSelect && rec && rec.data) { | |
130 | def = rec.data[me.valueField]; | |
131 | me.setValue(def, true); | |
132 | } else { | |
133 | me.setValue(me.editable ? def : '', true); | |
134 | } | |
135 | } | |
136 | } | |
137 | }); | |
138 | } | |
139 | }); |