cd6bd6b5662733fbec43519284af28fd9ba51a07
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / JavaScript / Wizard / Viewport / Left / Options / Forms / Options.js
1 Ext.namespace('TYPO3.Form.Wizard.Viewport.Left.Options.Forms');
2
3 /**
4 * The options properties of the element
5 *
6 * @class TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Options
7 * @extends Ext.FormPanel
8 */
9 TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Options = Ext.extend(Ext.grid.EditorGridPanel, {
10 /**
11 * @cfg {String} title
12 * The title text to be used as innerHTML (html tags are accepted) to
13 * display in the panel header (defaults to '').
14 */
15 title: TYPO3.l10n.localize('options_fieldoptions'),
16
17 /**
18 * @cfg {String} autoExpandColumn
19 * The id of a column in this grid that should expand to fill unused space.
20 * This value specified here can not be 0.
21 */
22 autoExpandColumn: 'data',
23
24 /**
25 * @cfg {Number/String} padding
26 * A shortcut for setting a padding style on the body element. The value can
27 * either be a number to be applied to all sides, or a normal css string
28 * describing padding.
29 */
30 padding: '10px 0 10px 15px',
31
32 /**
33 * @cfg {Number} clicksToEdit
34 * The number of clicks on a cell required to display the cell's editor (defaults to 2).
35 * Setting this option to 'auto' means that mousedown on the selected cell starts
36 * editing that cell.
37 */
38 clicksToEdit: 1,
39
40 /**
41 * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view. Any of
42 * the config options available for Ext.grid.GridView can be specified here. This option
43 * is ignored if view is specified.
44 */
45 viewConfig:{
46 forceFit: true,
47 emptyText: TYPO3.l10n.localize('fieldoptions_emptytext'),
48 scrollOffset: 0
49 },
50
51 /**
52 * Constructor
53 *
54 * Configure store and columns for the grid
55 */
56 initComponent: function() {
57 var optionRecord = Ext.data.Record.create([
58 {
59 name: 'data',
60 mapping:'data',
61 type: 'string'
62 }, {
63 name: 'selected',
64 convert: this.convertSelected,
65 type: 'bool'
66 }
67 ]);
68
69 var store = new Ext.data.JsonStore({
70 idIndex: 1,
71 fields: optionRecord,
72 data: this.element.configuration.options,
73 autoDestroy: true,
74 autoSave: true,
75 listeners: {
76 'add': {
77 scope: this,
78 fn: this.storeOptions
79 },
80 'remove': {
81 scope: this,
82 fn: this.storeOptions
83 },
84 'update': {
85 scope: this,
86 fn: this.storeOptions
87 }
88 }
89 });
90
91 var checkColumn = new Ext.ux.grid.SingleSelectCheckColumn({
92 id: 'selected',
93 header: TYPO3.l10n.localize('fieldoptions_selected'),
94 dataIndex: 'selected',
95 width: 30
96 });
97
98 var itemDeleter = new Ext.ux.grid.ItemDeleter();
99
100 var config = {
101 store: store,
102 cm: new Ext.grid.ColumnModel({
103 defaults: {
104 sortable: false
105 },
106 columns: [
107 {
108 id: 'data',
109 header: TYPO3.l10n.localize('fieldoptions_data'),
110 dataIndex: 'data',
111 editor: new Ext.ux.form.TextFieldSubmit({
112 allowBlank: false,
113 listeners: {
114 'triggerclick': function(field) {
115 field.gridEditor.record.set('data', field.getValue());
116 }
117 }
118 })
119 },
120 checkColumn,
121 itemDeleter
122 ]
123 }),
124 selModel: itemDeleter,
125 plugins: [checkColumn],
126 tbar: [{
127 text: TYPO3.l10n.localize('fieldoptions_button_add'),
128 handler: this.addOption,
129 scope: this
130 }]
131 };
132
133 // apply config
134 Ext.apply(this, Ext.apply(this.initialConfig, config));
135
136 // call parent
137 TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Options.superclass.initComponent.apply(this, arguments);
138 },
139
140 /**
141 * Adds a new record to the grid
142 *
143 * Called when the button to add option in the top bar has been clicked
144 */
145 addOption: function() {
146 var option = this.store.recordType;
147 var newOption = new option({
148 data: TYPO3.l10n.localize('fieldoptions_new'),
149 selected: false
150 });
151 this.stopEditing();
152 this.store.add(newOption);
153 this.startEditing(0, 0);
154 },
155
156 /**
157 * Stores the options in the element whenever a change has been done to the
158 * grid, like add, remove or update
159 *
160 * @param store
161 * @param record
162 */
163 storeOptions: function(store, record) {
164 if (record && record.dirty) {
165 record.commit();
166 } else {
167 var option = {};
168 var options = [];
169 this.store.each(function(record) {
170 var option = {
171 data: record.get('data')
172 };
173 if (record.get('selected')) {
174 option.attributes = {
175 selected: 'selected'
176 };
177 }
178 options.push(option);
179 });
180 this.element.configuration.options = [];
181 var formConfiguration = {
182 options: options
183 };
184 this.element.setConfigurationValue(formConfiguration);
185 }
186 },
187
188 /**
189 * Convert and remap the "selected" attribute. In HTML the attribute needs
190 * be as selected="selected", while the grid uses a boolean.
191 *
192 * @param v
193 * @param record
194 * @returns {Boolean}
195 */
196 convertSelected: function(v, record) {
197 if (record.attributes && record.attributes.selected) {
198 if (record.attributes.selected == 'selected') {
199 return true;
200 }
201 }
202 return false;
203 }
204 });
205
206 Ext.reg('typo3-form-wizard-viewport-left-options-forms-options', TYPO3.Form.Wizard.Viewport.Left.Options.Forms.Options);