examples/restful/restful.js

   1 Ext.require(['Ext.data.*', 'Ext.grid.*']);
   2
   3 Ext.define('Person', {
   4     extend: 'Ext.data.Model',
   5     fields: [{
   6         name: 'id',
   7         type: 'int',
   8         useNull: true
   9     }, 'email', 'first', 'last'],
  10     validations: [{
  11         type: 'length',
  12         field: 'email',
  13         min: 1
  14     }, {
  15         type: 'length',
  16         field: 'first',
  17         min: 1
  18     }, {
  19         type: 'length',
  20         field: 'last',
  21         min: 1
  22     }]
  23 });
  24
  25 Ext.onReady(function(){
  26
  27     var store = Ext.create('Ext.data.Store', {
  28         autoLoad: true,
  29         autoSync: true,
  30         model: 'Person',
  31         proxy: {
  32             type: 'rest',
  33             url: 'app.php/users',
  34             reader: {
  35                 type: 'json',
  36                 root: 'data'
  37             },
  38             writer: {
  39                 type: 'json'
  40             }
  41         },
  42         listeners: {
  43             write: function(store, operation){
  44                 var record = operation.records[0],
  45                     name = Ext.String.capitalize(operation.action),
  46                     verb;
  47
  48                 if (name == 'Destroy') {
  49                     verb = 'Destroyed';
  50                 } else {
  51                     verb = name + 'd';
  52                 }
  53                 Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
  54
  55             }
  56         }
  57     });
  58
  59     var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
  60
  61     var grid = Ext.create('Ext.grid.Panel', {
  62         renderTo: document.body,
  63         plugins: [rowEditing],
  64         width: 400,
  65         height: 300,
  66         frame: true,
  67         title: 'Users',
  68         store: store,
  69         iconCls: 'icon-user',
  70         columns: [{
  71             text: 'ID',
  72             width: 40,
  73             sortable: true,
  74             dataIndex: 'id',
  75             renderer: function(v){
  76                 if (Ext.isEmpty(v)) {
  77                     v = '&#160;';
  78                 }
  79                 return v;
  80             }
  81         }, {
  82             text: 'Email',
  83             flex: 1,
  84             sortable: true,
  85             dataIndex: 'email',
  86             field: {
  87                 xtype: 'textfield'
  88             }
  89         }, {
  90             header: 'First',
  91             width: 80,
  92             sortable: true,
  93             dataIndex: 'first',
  94             field: {
  95                 xtype: 'textfield'
  96             }
  97         }, {
  98             text: 'Last',
  99             width: 80,
 100             sortable: true,
 101             dataIndex: 'last',
 102             field: {
 103                 xtype: 'textfield'
 104             }
 105         }],
 106         dockedItems: [{
 107             xtype: 'toolbar',
 108             items: [{
 109                 text: 'Add',
 110                 iconCls: 'icon-add',
 111                 handler: function(){
 112                     // empty record
 113                     store.insert(0, new Person());
 114                     rowEditing.startEdit(0, 0);
 115                 }
 116             }, '-', {
 117                 text: 'Delete',
 118                 iconCls: 'icon-delete',
 119                 handler: function(){
 120                     var selection = grid.getView().getSelectionModel().getSelection()[0];
 121                     if (selection) {
 122                         store.remove(selection);
 123                     }
 124                 }
 125             }]
 126         }]
 127     });
 128 });