[TASK] EXT:form - Set proper default values in form wizard
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / JavaScript / Wizard / Elements / Basic / Form.js
1 Ext.namespace('TYPO3.Form.Wizard.Elements.Basic');
2
3 /**
4 * The FORM element
5 *
6 * @class TYPO3.Form.Wizard.Elements.Basic.Form
7 * @extends TYPO3.Form.Wizard.Elements
8 */
9 TYPO3.Form.Wizard.Elements.Basic.Form = Ext.extend(TYPO3.Form.Wizard.Elements, {
10 /**
11 * @cfg {Mixed} autoEl
12 * A tag name or DomHelper spec used to create the Element which will
13 * encapsulate this Component.
14 */
15 autoEl: 'li',
16
17 /**
18 * @cfg {String} elementClass
19 * An extra CSS class that will be added to this component's Element
20 */
21 elementClass: 'form',
22
23 /**
24 * @cfg {Mixed} tpl
25 * An Ext.Template, Ext.XTemplate or an array of strings to form an
26 * Ext.XTemplate. Used in conjunction with the data and tplWriteMode
27 * configurations.
28 *
29 * Adding novalidate attribute avoids HTML5 validation of elements.
30 */
31 tpl: new Ext.XTemplate(
32 '<form {[this.getAttributes(values.attributes)]} novalidate="novalidate">',
33 '<ol></ol>',
34 '</form>',
35 {
36 compiled: true,
37 getAttributes: function(attributes) {
38 var attributesHtml = '';
39 Ext.iterate(attributes, function(key, value) {
40 if (value) {
41 attributesHtml += key + '="' + value + '" ';
42 }
43 }, this);
44 return attributesHtml;
45 }
46 }
47 ),
48
49 /**
50 * @cfg {Boolean} isEditable
51 * Defines whether the element is editable. If the item is editable,
52 * a button group with remove and edit buttons will be added to this element
53 * and when the the element is clicked, an event is triggered to edit the
54 * element. Some elements, like the dummy, don't need this.
55 */
56 isEditable: false,
57
58 /**
59 * @cfg {Array} elementContainer
60 * Configuration for the containerComponent
61 */
62 elementContainer: {
63 hasDragAndDrop: true
64 },
65
66 /**
67 * Constructor
68 *
69 * Add the configuration object to this component
70 * @param config
71 */
72 constructor: function(config) {
73 Ext.apply(this, {
74 configuration: {
75 attributes: {
76 'accesskey': '',
77 'class': '',
78 'contenteditable': '',
79 'contextmenu': '',
80 'dir': '',
81 'draggable': '',
82 'dropzone': '',
83 'hidden': '',
84 'id': '',
85 'lang': '',
86 'spellcheck': '',
87 'style': '',
88 'tabindex': '',
89 'title': '',
90 'translate': '',
91
92 'accept': '',
93 'accept-charset': '',
94 'action': '',
95 'autocomplete': '',
96 'enctype': 'application/x-www-form-urlencoded',
97 'method': 'post',
98 'novalidate': ''
99 },
100 prefix: 'tx_form',
101 confirmation: true,
102 postProcessor: {
103 mail: {
104 recipientEmail: '',
105 senderEmail: ''
106 },
107 redirect: {
108 destination: ''
109 }
110 }
111 }
112 });
113 TYPO3.Form.Wizard.Elements.Basic.Form.superclass.constructor.apply(this, arguments);
114 },
115
116 /**
117 * Constructor
118 */
119 initComponent: function() {
120 var config = {};
121
122 // apply config
123 Ext.apply(this, Ext.apply(this.initialConfig, config));
124
125 // Initialize the container component
126 this.containerComponent = new TYPO3.Form.Wizard.Container(this.elementContainer);
127
128 // Call parent
129 TYPO3.Form.Wizard.Elements.Basic.Form.superclass.initComponent.apply(this, arguments);
130
131 // Initialize events after rendering
132 this.on('afterrender', this.afterRender, this);
133 },
134
135 /**
136 * Called by the 'afterrender' event.
137 *
138 * Add the container component to this component
139 * Stop the submit event of the form, because this form does not need to be
140 * submitted
141 */
142 afterRender: function() {
143 this.addContainerAfterRender();
144
145 this.getEl().child('form').on(
146 'submit',
147 function(eventObject, htmlElement, object) {
148 eventObject.stopEvent();
149 }
150 );
151
152 // Call parent
153 TYPO3.Form.Wizard.Elements.Basic.Form.superclass.afterRender.call(this);
154 },
155
156 /**
157 * Add the container component to this component
158 *
159 * Because we are using a XTemplate for rendering this component, we can
160 * only add the container after rendering, because the <ol> tag needs to be
161 * replaced with this container.
162 */
163 addContainerAfterRender: function() {
164 this.containerComponent.applyToMarkup(this.getEl().child('ol'));
165 this.containerComponent.rendered = false;
166 this.containerComponent.render();
167 this.containerComponent.doLayout();
168 },
169
170 /**
171 * Remove a post processor from this element
172 *
173 * @param type
174 */
175 removePostProcessor: function(type) {
176 if (this.configuration.postProcessor[type]) {
177 delete this.configuration.postProcessor[type];
178 TYPO3.Form.Wizard.Helpers.History.setHistory();
179 }
180 }
181 });
182
183 Ext.reg('typo3-form-wizard-elements-basic-form', TYPO3.Form.Wizard.Elements.Basic.Form);