fix emptyClass layout handling
[tine20] / tine20 / Tinebase / js / widgets / form / RecordsPickerCombo.js
1 /*
2  * Tine 2.0
3  *
4  * @license     http://www.gnu.org/licenses/agpl.html AGPL Version 3
5  * @author      Philipp Schüle <p.schuele@metaways.de>
6  * @copyright   Copyright (c) 2016 Metaways Infosystems GmbH (http://www.metaways.de)
7  *
8  */
9 Ext.ns('Tine.Tinebase.widgets.form');
10
11 /**
12  * config grid panel
13  *
14  * @namespace   Tine.Tinebase.widgets.form
15  * @class       Tine.Tinebase.widgets.form.RecordsPickerCombo
16  * @extends     Tine.widgets.grid.LayerCombo
17  */
18 Tine.Tinebase.widgets.form.RecordsPickerCombo = Ext.extend(Ext.ux.form.LayerCombo, {
19
20     hideButtons: false,
21     layerAlign: 'tr-br?',
22     minLayerWidth: 400,
23     layerHeight: 300,
24     allowBlur: true,
25
26     lazyInit: true,
27
28     formConfig: {
29         labelAlign: 'left',
30         labelWidth: 30
31     },
32
33     pickerGrid: null,
34     inEditor: true,
35     recordClass: null,
36
37     initComponent: function () {
38         this.emptyText = this.emptyText || i18n._('Search for records ...')
39
40         Tine.Tinebase.widgets.form.RecordsPickerCombo.superclass.initComponent.call(this);
41         this.store = new Ext.data.SimpleStore({
42             fields: this.recordClass
43         });
44
45         this.on('beforecollapse', this.onBeforeCollapse, this);
46     },
47
48     getItems: function () {
49         this.pickerGrid = new Tine.widgets.grid.PickerGridPanel({
50             recordClass: this.recordClass,
51             height: this.layerHeight - 40 || 'auto',
52             onStoreChange: Ext.emptyFn,
53             store: this.store
54         });
55
56         return [this.pickerGrid];
57     },
58
59     /**
60      * cancel collapse if ctx menu is shown
61      */
62     onBeforeCollapse: function () {
63         return this.pickerGrid
64             && (!this.pickerGrid.contextMenu || this.pickerGrid.contextMenu.hidden)
65             && !this.pickerGrid.editing;
66     },
67
68     /**
69      * @param {String} value
70      * @return {Ext.form.Field} this
71      */
72     setValue: function (value) {
73         var _ = window.lodash;
74
75         value = value || [];
76         this.setStoreFromArray(value);
77         if (this.rendered) {
78             var text = _.reduce(this.store.data.items, function(result, record) {
79                 return result.concat(record.getTitle());
80             }, []).join(', ');
81             this.setRawValue(text || this.emptyText);
82             this.el[(text ? 'remove' : 'add') + 'Class'](this.emptyClass);
83         }
84         this.currentValue = value;
85
86         // to string overwrite, to make sure record is changed.
87         Tine.Tinebase.common.assertComparable(this.currentValue);
88         return this;
89     },
90
91     afterRender: function () {
92
93         Tine.Tinebase.widgets.form.RecordsPickerCombo.superclass.afterRender.apply(this, arguments);
94         if (this.currentValue) {
95             this.setValue(this.currentValue);
96         }
97     },
98     /**
99      * sets values to innerForm (grid)
100      */
101     setFormValue: function (value) {
102         if (!value) {
103             value = [];
104         }
105
106         this.setStoreFromArray(value);
107     },
108
109     /**
110      * retrieves values from grid
111      *
112      * @returns {*|Array}
113      */
114     getFormValue: function () {
115         return this.getFromStoreAsArray();
116     },
117
118     /**
119      * get values from store (as array)
120      *
121      * @param {Array}
122      *
123      */
124     setStoreFromArray: function(data) {
125         data = data || [];
126         //this.pickerGrid.getStore().clearData();
127         this.store.removeAll();
128
129         for (var i = data.length-1; i >=0; --i) {
130             var recordData = data[i],
131                 newRecord = new this.recordClass(recordData);
132             this.store.insert(0, newRecord);
133         }
134     },
135
136     /**
137      * get values from store (as array)
138      *
139      * @return {Array}
140      *
141      */
142     getFromStoreAsArray: function() {
143         var result = [];
144         this.store.each(function(record) {
145             result.push(record.data);
146         }, this);
147
148         return result;
149     }
150 });
151
152 Ext.reg('tinerecordspickercombobox', Tine.Tinebase.widgets.form.RecordsPickerCombo);