docs/source/restful.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">// Application instance for showing user-feedback messages.
   9 var App = new Ext.App({});
  10
  11 // Create a standard HttpProxy instance.
  12 var proxy = new Ext.data.HttpProxy({
  13     url: 'app.php/users'
  14 });
  15
  16 // Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
  17 var reader = new Ext.data.JsonReader({
  18     totalProperty: 'total',
  19     successProperty: 'success',
  20     idProperty: 'id',
  21     root: 'data'
  22 }, [
  23     {name: 'id'},
  24     {name: 'email', allowBlank: false},
  25     {name: 'first', allowBlank: false},
  26     {name: 'last', allowBlank: false}
  27 ]);
  28
  29 // The new DataWriter component.
  30 var writer = new Ext.data.JsonWriter();
  31
  32 // Typical Store collecting the Proxy, Reader and Writer together.
  33 var store = new Ext.data.Store({
  34     id: 'user',
  35     restful: true,     // <-- This Store is RESTful
  36     proxy: proxy,
  37     reader: reader,
  38     writer: writer,    // <-- plug a DataWriter into the store just as you would a Reader
  39     listeners: {
  40         write : function(store, action, result, response, rs) {
  41             App.setAlert(response.success, response.message);
  42         }
  43     }
  44 });
  45
  46 // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
  47 var userColumns =  [
  48     {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
  49     {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
  50     {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
  51     {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
  52 ];
  53
  54 // load the store immeditately
  55 store.load();
  56
  57 Ext.onReady(function() {
  58     Ext.QuickTips.init();
  59
  60     // use RowEditor for editing
  61     var editor = new Ext.ux.grid.RowEditor({
  62         saveText: 'Update'
  63     });
  64
  65     // Create a typical GridPanel with RowEditor plugin
  66     var userGrid = new Ext.grid.GridPanel({
  67         renderTo: 'user-grid',
  68         iconCls: 'icon-grid',
  69         frame: true,
  70         title: 'Users',
  71         autoScroll: true,
  72         height: 300,
  73         store: store,
  74         plugins: [editor],
  75         columns : userColumns,
  76         tbar: [{
  77             text: 'Add',
  78             iconCls: 'silk-add',
  79             handler: onAdd
  80         }, '-', {
  81             text: 'Delete',
  82             iconCls: 'silk-delete',
  83             handler: onDelete
  84         }, '-'],
  85         viewConfig: {
  86             forceFit: true
  87         }
  88     });
  89
  90     <div id="prop-Ext.ux.TaskBar.TaskButton-function"></div>/**
  91      * onAdd
  92      */
  93     function onAdd(btn, ev) {
  94         var u = new userGrid.store.recordType({
  95             first : '',
  96             last: '',
  97             email : ''
  98         });
  99         editor.stopEditing();
 100         userGrid.store.insert(0, u);
 101         editor.startEditing(0);
 102     }
 103     <div id="prop-Ext.ux.TaskBar.TaskButton-function"></div>/**
 104      * onDelete
 105      */
 106     function onDelete() {
 107         var rec = userGrid.getSelectionModel().getSelected();
 108         if (!rec) {
 109             return false;
 110         }
 111         userGrid.store.remove(rec);
 112     }
 113
 114 });
 115 </pre>    \r
 116 </body>\r
 117 </html>