examples/writer/writer.js

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