76583558c0b3d811e1a654ed4b6677f32a322980
[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 tpl: new Ext.XTemplate(
30 '<form {[this.getAttributes(values.attributes)]}>',
31 '<ol></ol>',
32 '</form>',
33 {
34 compiled: true,
35 getAttributes: function(attributes) {
36 var attributesHtml = '';
37 Ext.iterate(attributes, function(key, value) {
38 if (value) {
39 attributesHtml += key + '="' + value + '" ';
40 }
41 }, this);
42 return attributesHtml;
43 }
44 }
45 ),
46
47 /**
48 * @cfg {Boolean} isEditable
49 * Defines whether the element is editable. If the item is editable,
50 * a button group with remove and edit buttons will be added to this element
51 * and when the the element is clicked, an event is triggered to edit the
52 * element. Some elements, like the dummy, don't need this.
53 */
54 isEditable: false,
55
56 /**
57 * @cfg {Array} elementContainer
58 * Configuration for the containerComponent
59 */
60 elementContainer: {
61 hasDragAndDrop: true
62 },
63
64 /**
65 * Constructor
66 *
67 * Add the configuration object to this component
68 * @param config
69 */
70 constructor: function(config) {
71 Ext.apply(this, {
72 configuration: {
73 attributes: {
74 accept: '',
75 acceptcharset: '',
76 action: '',
77 "class": '',
78 dir: '',
79 enctype: 'application/x-www-form-urlencoded',
80 id: '',
81 lang: '',
82 method: 'post',
83 style: '',
84 title: ''
85 },
86 prefix: 'tx_form',
87 confirmation: true,
88 postProcessor: {
89 mail: {
90 recipientEmail: '',
91 senderEmail: ''
92 },
93 redirect: {
94 destination: ''
95 }
96 }
97 }
98 });
99 TYPO3.Form.Wizard.Elements.Basic.Form.superclass.constructor.apply(this, arguments);
100 },
101
102 /**
103 * Constructor
104 */
105 initComponent: function() {
106 var config = {};
107
108 // apply config
109 Ext.apply(this, Ext.apply(this.initialConfig, config));
110
111 // Initialize the container component
112 this.containerComponent = new TYPO3.Form.Wizard.Container(this.elementContainer);
113
114 // Call parent
115 TYPO3.Form.Wizard.Elements.Basic.Form.superclass.initComponent.apply(this, arguments);
116
117 // Initialize events after rendering
118 this.on('afterrender', this.afterRender, this);
119 },
120
121 /**
122 * Called by the 'afterrender' event.
123 *
124 * Add the container component to this component
125 * Stop the submit event of the form, because this form does not need to be
126 * submitted
127 */
128 afterRender: function() {
129 this.addContainerAfterRender();
130
131 this.getEl().child('form').on(
132 'submit',
133 function(eventObject, htmlElement, object) {
134 eventObject.stopEvent();
135 }
136 );
137
138 // Call parent
139 TYPO3.Form.Wizard.Elements.Basic.Form.superclass.afterRender.call(this);
140 },
141
142 /**
143 * Add the container component to this component
144 *
145 * Because we are using a XTemplate for rendering this component, we can
146 * only add the container after rendering, because the <ol> tag needs to be
147 * replaced with this container.
148 */
149 addContainerAfterRender: function() {
150 this.containerComponent.applyToMarkup(this.getEl().child('ol'));
151 this.containerComponent.rendered = false;
152 this.containerComponent.render();
153 this.containerComponent.doLayout();
154 },
155
156 /**
157 * Remove a post processor from this element
158 *
159 * @param type
160 */
161 removePostProcessor: function(type) {
162 if (this.configuration.postProcessor[type]) {
163 delete this.configuration.postProcessor[type];
164 TYPO3.Form.Wizard.Helpers.History.setHistory();
165 }
166 }
167 });
168
169 Ext.reg('typo3-form-wizard-elements-basic-form', TYPO3.Form.Wizard.Elements.Basic.Form);