docs/source/writer.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 HttpProxy instance.  Notice new configuration parameter "api" here instead of load.  However, you can still use
  12 // the "url" paramater -- All CRUD requests will be directed to your single url instead.
  13 var proxy = new Ext.data.HttpProxy({
  14     api: {
  15         read : 'app.php/users/view',
  16         create : 'app.php/users/create',
  17         update: 'app.php/users/update',
  18         destroy: 'app.php/users/destroy'
  19     }
  20 });
  21
  22 // Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
  23 var reader = new Ext.data.JsonReader({
  24     totalProperty: 'total',
  25     successProperty: 'success',
  26     idProperty: 'id',
  27     root: 'data'
  28 }, [
  29     {name: 'id'},
  30     {name: 'email', allowBlank: false},
  31     {name: 'first', allowBlank: false},
  32     {name: 'last', allowBlank: false}
  33 ]);
  34
  35 // The new DataWriter component.
  36 var writer = new Ext.data.JsonWriter({
  37     encode: true,
  38     writeAllFields: false
  39 });
  40
  41 // Typical Store collecting the Proxy, Reader and Writer together.
  42 var store = new Ext.data.Store({
  43     id: 'user',
  44     proxy: proxy,
  45     reader: reader,
  46     writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
  47     autoSave: true,  // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
  48     listeners: {
  49         write : function(store, action, result, res, rs) {
  50             App.setAlert(res.success, res.message); // <-- show user-feedback for all write actions
  51         },
  52         exception : function(proxy, type, action, options, res, arg) {
  53             if (type === 'remote') {
  54                 Ext.Msg.show({
  55                     title: 'REMOTE EXCEPTION',
  56                     msg: res.message,
  57                     icon: Ext.MessageBox.ERROR,
  58                     buttons: Ext.Msg.OK
  59                 });
  60             }
  61         }
  62     }
  63 });
  64
  65
  66 // A new generic text field
  67 var textField =  new Ext.form.TextField();
  68
  69 // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
  70 var userColumns =  [
  71     {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
  72     {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: textField},
  73     {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: textField},
  74     {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: textField}
  75 ];
  76
  77 // load the store immeditately
  78 store.load();
  79
  80
  81 Ext.onReady(function() {
  82     Ext.QuickTips.init();
  83
  84     // create user.Form instance (@see UserForm.js)
  85     var userForm = new App.user.Form({
  86         renderTo: 'user-form',
  87         listeners: {
  88             create : function(fpanel, data) {   // <-- custom "create" event defined in App.user.Form class
  89                 var rec = new userGrid.store.recordType(data);
  90                 userGrid.store.insert(0, rec);
  91             }
  92         }
  93     });
  94
  95     // create user.Grid instance (@see UserGrid.js)
  96     var userGrid = new App.user.Grid({
  97         renderTo: 'user-grid',
  98         store: store,
  99         columns : userColumns,
 100         listeners: {
 101             rowclick: function(g, index, ev) {
 102                 var rec = g.store.getAt(index);
 103                 userForm.loadRecord(rec);
 104             },
 105             destroy : function() {
 106                 userForm.getForm().reset();
 107             }
 108         }
 109     });
 110 });
 111 </pre>    \r
 112 </body>\r
 113 </html>