examples/writer/writer.js

   1 Ext.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
 101 Ext.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
 247 Ext.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
 269 Ext.require([
 270     'Ext.data.*',
 271     'Ext.tip.QuickTipManager',
 272     'Ext.window.MessageBox'
 273 ]);
 274
 275 Ext.onReady(function(){
 276     Ext.tip.QuickTipManager.init();
 277     var store = Ext.create('Ext.data.Store', {
 278         model: 'Writer.Person',
 279         autoLoad: true,
 280         autoSync: true,
 281         proxy: {
 282             type: 'ajax',
 283             api: {
 284                 read: 'app.php/users/view',
 285                 create: 'app.php/users/create',
 286                 update: 'app.php/users/update',
 287                 destroy: 'app.php/users/destroy'
 288             },
 289             reader: {
 290                 type: 'json',
 291                 successProperty: 'success',
 292                 root: 'data',
 293                 messageProperty: 'message'
 294             },
 295             writer: {
 296                 type: 'json',
 297                 writeAllFields: false,
 298                 root: 'data'
 299             },
 300             listeners: {
 301                 exception: function(proxy, response, operation){
 302                     Ext.MessageBox.show({
 303                         title: 'REMOTE EXCEPTION',
 304                         msg: operation.getError(),
 305                         icon: Ext.MessageBox.ERROR,
 306                         buttons: Ext.Msg.OK
 307                     });
 308                 }
 309             }
 310         },
 311         listeners: {
 312             write: function(proxy, operation){
 313                 if (operation.action == 'destroy') {
 314                     main.child('#form').setActiveRecord(null);
 315                 }
 316                 Ext.example.msg(operation.action, operation.resultSet.message);
 317             }
 318         }
 319     });
 320
 321     var main = Ext.create('Ext.container.Container', {
 322         padding: '0 0 0 20',
 323         width: 500,
 324         height: 450,
 325         renderTo: document.body,
 326         layout: {
 327             type: 'vbox',
 328             align: 'stretch'
 329         },
 330         items: [{
 331             itemId: 'form',
 332             xtype: 'writerform',
 333             height: 150,
 334             margins: '0 0 10 0',
 335             listeners: {
 336                 create: function(form, data){
 337                     store.insert(0, data);
 338                 }
 339             }
 340         }, {
 341             itemId: 'grid',
 342             xtype: 'writergrid',
 343             title: 'User List',
 344             flex: 1,
 345             store: store,
 346             listeners: {
 347                 selectionchange: function(selModel, selected) {
 348                     main.child('#form').setActiveRecord(selected[0] || null);
 349                 }
 350             }
 351         }]
 352     });
 353 });