examples/writer/writer.js

   1 /*!
   2  * Ext JS Library 3.1.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     messageProperty: 'message'  // <-- New "messageProperty" meta-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 });
  49
  50 // load the store immeditately
  51 store.load();
  52
  53 ////
  54 // ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
  55 // upon Ext.data.DataProxy class.  This is handy for centralizing user-feedback messaging into one place rather than
  56 // attaching listenrs to EACH Store.
  57 //
  58 // Listen to all DataProxy beforewrite events
  59 //
  60 Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
  61     App.setAlert(App.STATUS_NOTICE, "Before " + action);
  62 });
  63
  64 ////
  65 // all write events
  66 //
  67 Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
  68     App.setAlert(true, action + ':' + res.message);
  69 });
  70
  71 ////
  72 // all exception events
  73 //
  74 Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
  75     if (type === 'remote') {
  76         Ext.Msg.show({
  77             title: 'REMOTE EXCEPTION',
  78             msg: res.message,
  79             icon: Ext.MessageBox.ERROR,
  80             buttons: Ext.Msg.OK
  81         });
  82     }
  83 });
  84
  85 // A new generic text field
  86 var textField =  new Ext.form.TextField();
  87
  88 // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
  89 var userColumns =  [
  90     {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
  91     {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: textField},
  92     {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: textField},
  93     {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: textField}
  94 ];
  95
  96 Ext.onReady(function() {
  97     Ext.QuickTips.init();
  98
  99     // create user.Form instance (@see UserForm.js)
 100     var userForm = new App.user.Form({
 101         renderTo: 'user-form',
 102         listeners: {
 103             create : function(fpanel, data) {   // <-- custom "create" event defined in App.user.Form class
 104                 var rec = new userGrid.store.recordType(data);
 105                 userGrid.store.insert(0, rec);
 106             }
 107         }
 108     });
 109
 110     // create user.Grid instance (@see UserGrid.js)
 111     var userGrid = new App.user.Grid({
 112         renderTo: 'user-grid',
 113         store: store,
 114         columns : userColumns,
 115         listeners: {
 116             rowclick: function(g, index, ev) {
 117                 var rec = g.store.getAt(index);
 118                 userForm.loadRecord(rec);
 119             },
 120             destroy : function() {
 121                 userForm.getForm().reset();
 122             }
 123         }
 124     });
 125 });