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.getRecords()[0],
  45                     name = Ext.String.capitalize(operation.action),
  46                     verb;
  47
  48
  49                 if (name == 'Destroy') {
  50                     record = operation.records[0];
  51                     verb = 'Destroyed';
  52                 } else {
  53                     verb = name + 'd';
  54                 }
  55                 Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
  56
  57             }
  58         }
  59     });
  60
  61     var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
  62
  63     var grid = Ext.create('Ext.grid.Panel', {
  64         renderTo: document.body,
  65         plugins: [rowEditing],
  66         width: 400,
  67         height: 300,
  68         frame: true,
  69         title: 'Users',
  70         store: store,
  71         iconCls: 'icon-user',
  72         columns: [{
  73             text: 'ID',
  74             width: 40,
  75             sortable: true,
  76             dataIndex: 'id'
  77         }, {
  78             text: 'Email',
  79             flex: 1,
  80             sortable: true,
  81             dataIndex: 'email',
  82             field: {
  83                 xtype: 'textfield'
  84             }
  85         }, {
  86             header: 'First',
  87             width: 80,
  88             sortable: true,
  89             dataIndex: 'first',
  90             field: {
  91                 xtype: 'textfield'
  92             }
  93         }, {
  94             text: 'Last',
  95             width: 80,
  96             sortable: true,
  97             dataIndex: 'last',
  98             field: {
  99                 xtype: 'textfield'
 100             }
 101         }],
 102         dockedItems: [{
 103             xtype: 'toolbar',
 104             items: [{
 105                 text: 'Add',
 106                 iconCls: 'icon-add',
 107                 handler: function(){
 108                     // empty record
 109                     store.insert(0, new Person());
 110                     rowEditing.startEdit(0, 0);
 111                 }
 112             }, '-', {
 113                 text: 'Delete',
 114                 iconCls: 'icon-delete',
 115                 handler: function(){
 116                     var selection = grid.getView().getSelectionModel().getSelection()[0];
 117                     if (selection) {
 118                         store.remove(selection);
 119                     }
 120                 }
 121             }]
 122         }]
 123     });
 124 });