examples/writer/writer.js

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