/ext-4.1.0_b3/examples/writer/writer.js
JavaScript | 393 lines | 364 code | 29 blank | 0 comment | 14 complexity | d1219942e6d1cd7dd7f04a9bc5c7946b MD5 | raw file
1Ext.define('Writer.Form', {
2 extend: 'Ext.form.Panel',
3 alias: 'widget.writerform',
4
5 requires: ['Ext.form.field.Text'],
6
7 initComponent: function(){
8 this.addEvents('create');
9 Ext.apply(this, {
10 activeRecord: null,
11 iconCls: 'icon-user',
12 frame: true,
13 title: 'User -- All fields are required',
14 defaultType: 'textfield',
15 bodyPadding: 5,
16 fieldDefaults: {
17 anchor: '100%',
18 labelAlign: 'right'
19 },
20 items: [{
21 fieldLabel: 'Email',
22 name: 'email',
23 allowBlank: false,
24 vtype: 'email'
25 }, {
26 fieldLabel: 'First',
27 name: 'first',
28 allowBlank: false
29 }, {
30 fieldLabel: 'Last',
31 name: 'last',
32 allowBlank: false
33 }],
34 dockedItems: [{
35 xtype: 'toolbar',
36 dock: 'bottom',
37 ui: 'footer',
38 items: ['->', {
39 iconCls: 'icon-save',
40 itemId: 'save',
41 text: 'Save',
42 disabled: true,
43 scope: this,
44 handler: this.onSave
45 }, {
46 iconCls: 'icon-user-add',
47 text: 'Create',
48 scope: this,
49 handler: this.onCreate
50 }, {
51 iconCls: 'icon-reset',
52 text: 'Reset',
53 scope: this,
54 handler: this.onReset
55 }]
56 }]
57 });
58 this.callParent();
59 },
60
61 setActiveRecord: function(record){
62 this.activeRecord = record;
63 if (record) {
64 this.down('#save').enable();
65 this.getForm().loadRecord(record);
66 } else {
67 this.down('#save').disable();
68 this.getForm().reset();
69 }
70 },
71
72 onSave: function(){
73 var active = this.activeRecord,
74 form = this.getForm();
75
76 if (!active) {
77 return;
78 }
79 if (form.isValid()) {
80 form.updateRecord(active);
81 this.onReset();
82 }
83 },
84
85 onCreate: function(){
86 var form = this.getForm();
87
88 if (form.isValid()) {
89 this.fireEvent('create', this, form.getValues());
90 form.reset();
91 }
92
93 },
94
95 onReset: function(){
96 this.setActiveRecord(null);
97 this.getForm().reset();
98 }
99});
100
101Ext.define('Writer.Grid', {
102 extend: 'Ext.grid.Panel',
103 alias: 'widget.writergrid',
104
105 requires: [
106 'Ext.grid.plugin.CellEditing',
107 'Ext.form.field.Text',
108 'Ext.toolbar.TextItem'
109 ],
110
111 initComponent: function(){
112
113 this.editing = Ext.create('Ext.grid.plugin.CellEditing');
114
115 Ext.apply(this, {
116 iconCls: 'icon-grid',
117 frame: true,
118 plugins: [this.editing],
119 dockedItems: [{
120 xtype: 'toolbar',
121 items: [{
122 iconCls: 'icon-add',
123 text: 'Add',
124 scope: this,
125 handler: this.onAddClick
126 }, {
127 iconCls: 'icon-delete',
128 text: 'Delete',
129 disabled: true,
130 itemId: 'delete',
131 scope: this,
132 handler: this.onDeleteClick
133 }]
134 }, {
135 weight: 2,
136 xtype: 'toolbar',
137 dock: 'bottom',
138 items: [{
139 xtype: 'tbtext',
140 text: '<b>@cfg</b>'
141 }, '|', {
142 text: 'autoSync',
143 enableToggle: true,
144 pressed: true,
145 tooltip: 'When enabled, Store will execute Ajax requests as soon as a Record becomes dirty.',
146 scope: this,
147 toggleHandler: function(btn, pressed){
148 this.store.autoSync = pressed;
149 }
150 }, {
151 text: 'batch',
152 enableToggle: true,
153 pressed: true,
154 tooltip: 'When enabled, Store will batch all records for each type of CRUD verb into a single Ajax request.',
155 scope: this,
156 toggleHandler: function(btn, pressed){
157 this.store.getProxy().batchActions = pressed;
158 }
159 }, {
160 text: 'writeAllFields',
161 enableToggle: true,
162 pressed: false,
163 tooltip: 'When enabled, Writer will write *all* fields to the server -- not just those that changed.',
164 scope: this,
165 toggleHandler: function(btn, pressed){
166 this.store.getProxy().getWriter().writeAllFields = pressed;
167 }
168 }]
169 }, {
170 weight: 1,
171 xtype: 'toolbar',
172 dock: 'bottom',
173 ui: 'footer',
174 items: ['->', {
175 iconCls: 'icon-save',
176 text: 'Sync',
177 scope: this,
178 handler: this.onSync
179 }]
180 }],
181 columns: [{
182 text: 'ID',
183 width: 40,
184 sortable: true,
185 dataIndex: 'id'
186 }, {
187 header: 'Email',
188 flex: 1,
189 sortable: true,
190 dataIndex: 'email',
191 field: {
192 type: 'textfield'
193 }
194 }, {
195 header: 'First',
196 width: 100,
197 sortable: true,
198 dataIndex: 'first',
199 field: {
200 type: 'textfield'
201 }
202 }, {
203 header: 'Last',
204 width: 100,
205 sortable: true,
206 dataIndex: 'last',
207 field: {
208 type: 'textfield'
209 }
210 }]
211 });
212 this.callParent();
213 this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
214 },
215
216 onSelectChange: function(selModel, selections){
217 this.down('#delete').setDisabled(selections.length === 0);
218 },
219
220 onSync: function(){
221 this.store.sync();
222 },
223
224 onDeleteClick: function(){
225 var selection = this.getView().getSelectionModel().getSelection()[0];
226 if (selection) {
227 this.store.remove(selection);
228 }
229 },
230
231 onAddClick: function(){
232 var rec = new Writer.Person({
233 first: '',
234 last: '',
235 email: ''
236 }), edit = this.editing;
237
238 edit.cancelEdit();
239 this.store.insert(0, rec);
240 edit.startEditByPosition({
241 row: 0,
242 column: 1
243 });
244 }
245});
246
247Ext.define('Writer.Person', {
248 extend: 'Ext.data.Model',
249 fields: [{
250 name: 'id',
251 type: 'int',
252 useNull: true
253 }, 'email', 'first', 'last'],
254 validations: [{
255 type: 'length',
256 field: 'email',
257 min: 1
258 }, {
259 type: 'length',
260 field: 'first',
261 min: 1
262 }, {
263 type: 'length',
264 field: 'last',
265 min: 1
266 }]
267});
268
269Ext.require([
270 'Ext.data.*',
271 'Ext.tip.QuickTipManager',
272 'Ext.window.MessageBox'
273]);
274
275Ext.onReady(function(){
276 Ext.tip.QuickTipManager.init();
277
278 Ext.create('Ext.button.Button', {
279 margin: '0 0 20 20',
280 text: 'Reset sample database back to initial state',
281 renderTo: document.body,
282 tooltip: 'The sample database is stored in the session, including any changes you make. Click this button to reset the sample database to the initial state',
283 handler: function(){
284 Ext.getBody().mask('Resetting...');
285 Ext.Ajax.request({
286 url: 'app.php/example/reset',
287 callback: function(options, success, response) {
288 Ext.getBody().unmask();
289
290 var didReset = true,
291 o;
292
293 if (success) {
294 try {
295 o = Ext.decode(response.responseText);
296 didReset = o.success === true;
297 } catch (e) {
298 didReset = false;
299 }
300 } else {
301 didReset = false;
302 }
303
304 if (didReset) {
305 store.load();
306 main.down('#form').setActiveRecord(null);
307 Ext.example.msg('Reset', 'Reset successful');
308 } else {
309 Ext.MessageBox.alert('Error', 'Unable to reset example database');
310 }
311
312 }
313 });
314 }
315 })
316
317 var store = Ext.create('Ext.data.Store', {
318 model: 'Writer.Person',
319 autoLoad: true,
320 autoSync: true,
321 proxy: {
322 type: 'ajax',
323 api: {
324 read: 'app.php/users/view',
325 create: 'app.php/users/create',
326 update: 'app.php/users/update',
327 destroy: 'app.php/users/destroy'
328 },
329 reader: {
330 type: 'json',
331 successProperty: 'success',
332 root: 'data',
333 messageProperty: 'message'
334 },
335 writer: {
336 type: 'json',
337 writeAllFields: false,
338 root: 'data'
339 },
340 listeners: {
341 exception: function(proxy, response, operation){
342 Ext.MessageBox.show({
343 title: 'REMOTE EXCEPTION',
344 msg: operation.getError(),
345 icon: Ext.MessageBox.ERROR,
346 buttons: Ext.Msg.OK
347 });
348 }
349 }
350 },
351 listeners: {
352 write: function(proxy, operation){
353 if (operation.action == 'destroy') {
354 main.child('#form').setActiveRecord(null);
355 }
356 Ext.example.msg(operation.action, operation.resultSet.message);
357 }
358 }
359 });
360
361 var main = Ext.create('Ext.container.Container', {
362 padding: '0 0 0 20',
363 width: 500,
364 height: 450,
365 renderTo: document.body,
366 layout: {
367 type: 'vbox',
368 align: 'stretch'
369 },
370 items: [{
371 itemId: 'form',
372 xtype: 'writerform',
373 height: 150,
374 margins: '0 0 10 0',
375 listeners: {
376 create: function(form, data){
377 store.insert(0, data);
378 }
379 }
380 }, {
381 itemId: 'grid',
382 xtype: 'writergrid',
383 title: 'User List',
384 flex: 1,
385 store: store,
386 listeners: {
387 selectionchange: function(selModel, selected) {
388 main.child('#form').setActiveRecord(selected[0] || null);
389 }
390 }
391 }]
392 });
393});