0fa176b914c70fbc580a5c8dd780a82497c89a43
[Packages/TYPO3.CMS.git] / typo3 / sysext / form / Resources / Public / JavaScript / Wizard / Viewport / Right.js
1 Ext.namespace('TYPO3.Form.Wizard.Viewport');
2
3 /**
4 * The form container on the right side
5 *
6 * @class TYPO3.Form.Wizard.Viewport.Right
7 * @extends TYPO3.Form.Wizard.Elements.Container
8 */
9 TYPO3.Form.Wizard.Viewport.Right = Ext.extend(Ext.Container, {
10 /**
11 * @cfg {String} id
12 * The unique id of this component (defaults to an auto-assigned id).
13 * You should assign an id if you need to be able to access the component
14 * later and you do not have an object reference available
15 * (e.g., using Ext.getCmp).
16 *
17 * Note that this id will also be used as the element id for the containing
18 * HTML element that is rendered to the page for this component.
19 * This allows you to write id-based CSS rules to style the specific
20 * instance of this component uniquely, and also to select sub-elements
21 * using this component's id as the parent.
22 */
23 id: 'formwizard-right',
24
25 /**
26 * @cfg {Mixed} autoEl
27 * A tag name or DomHelper spec used to create the Element which will
28 * encapsulate this Component.
29 */
30 autoEl: 'ol',
31
32 /**
33 * @cfg {String} region
34 * Note: this config is only used when this BoxComponent is rendered
35 * by a Container which has been configured to use the BorderLayout
36 * layout manager (e.g. specifying layout:'border').
37 */
38 region: 'center',
39
40 /**
41 * @cfg {Boolean} autoScroll
42 * true to use overflow:'auto' on the components layout element and show
43 * scroll bars automatically when necessary, false to clip any overflowing
44 * content (defaults to false).
45 */
46 autoScroll: true,
47
48 /**
49 * Constructor
50 */
51 initComponent: function() {
52 var config = {
53 items: [
54 {
55 xtype: 'typo3-form-wizard-elements-basic-form'
56 }
57 ]
58 };
59
60 // apply config
61 Ext.apply(this, Ext.apply(this.initialConfig, config));
62
63 // call parent
64 TYPO3.Form.Wizard.Viewport.Right.superclass.initComponent.apply(this, arguments);
65
66 // Initialize the form after rendering
67 this.on('afterrender', this.initializeForm, this);
68 },
69
70 /**
71 * Initialize the form after rendering
72 */
73 initializeForm: function() {
74 this.loadForm();
75 },
76
77 /**
78 * Load the form with an AJAX call
79 *
80 * Loads the configuration and initializes the history
81 */
82 loadForm: function() {
83 Ext.Ajax.request({
84 url: document.location.href,
85 method: 'POST',
86 params: {
87 action: 'load'
88 },
89 success: function(response, opts) {
90 var responseObject = Ext.decode(response.responseText);
91 this.loadConfiguration(responseObject.configuration);
92 this.initializeHistory();
93 },
94 failure: function(response, opts) {
95 var responseObject = Ext.decode(response.responseText);
96 Ext.MessageBox.alert(
97 'Loading form',
98 'Server-side failure with status code ' + response.status
99 );
100 },
101 scope: this
102 });
103 },
104
105 /**
106 * Initialize the history
107 *
108 * After the form has been rendered for the first time, we need to add the
109 * initial configuration to the history, so it is possible to go back to the
110 * initial state of the form when it was loaded.
111 */
112 initializeHistory: function() {
113 TYPO3.Form.Wizard.Helpers.History.setHistory();
114 this.setForm();
115 },
116
117 /**
118 * Called by the history class when a change has been made in the form
119 *
120 * Constructs an array out of this component and the children to add it to
121 * the history or to use when saving the form
122 *
123 * @returns {Array}
124 */
125 getConfiguration: function() {
126 var historyConfiguration = new Array;
127
128 if (this.items) {
129 this.items.each(function(item, index, length) {
130 historyConfiguration.push(item.getConfiguration());
131 }, this);
132 }
133 return historyConfiguration;
134 },
135
136 /**
137 * Load a previous configuration from the history
138 *
139 * Removes all the components from this container and adds the components
140 * from the history configuration depending on the 'undo' or 'redo' action.
141 *
142 * @param historyConfiguration
143 */
144 loadConfiguration: function(historyConfiguration) {
145 this.removeAll();
146 this.add(historyConfiguration);
147 this.doLayout();
148 this.setForm();
149 },
150
151 /**
152 * Pass the form configuration to the left form tab
153 */
154 setForm: function() {
155 if (Ext.getCmp('formwizard-left-form')) {
156 Ext.getCmp('formwizard-left-form').setForm(this.get(0));
157 }
158 }
159 });
160
161 Ext.reg('typo3-form-wizard-viewport-right', TYPO3.Form.Wizard.Viewport.Right);