PageRenderTime 34ms CodeModel.GetById 13ms app.highlight 17ms RepoModel.GetById 1ms app.codeStats 0ms

/ext-4.1.0_b3/examples/writer/writer.js

https://bitbucket.org/srogerf/javascript
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});