examples/restful/restful.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 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 a standard HttpProxy instance.
  11 var proxy = new Ext.data.HttpProxy({
  12     url: 'app.php/users'
  13 });
  14
  15 // Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
  16 var reader = new Ext.data.JsonReader({
  17     totalProperty: 'total',
  18     successProperty: 'success',
  19     idProperty: 'id',
  20     root: 'data',
  21     messageProperty: 'message'  // <-- New "messageProperty" meta-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     encode: false   // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
  32 });
  33
  34 // Typical Store collecting the Proxy, Reader and Writer together.
  35 var store = new Ext.data.Store({
  36     id: 'user',
  37     restful: true,     // <-- This Store is RESTful
  38     proxy: proxy,
  39     reader: reader,
  40     writer: writer    // <-- plug a DataWriter into the store just as you would a Reader
  41 });
  42
  43 // load the store immeditately
  44 store.load();
  45
  46 ////
  47 // ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
  48 // upon Ext.data.DataProxy class.  This is handy for centralizing user-feedback messaging into one place rather than
  49 // attaching listenrs to EACH Store.
  50 //
  51 // Listen to all DataProxy beforewrite events
  52 //
  53 Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
  54     App.setAlert(App.STATUS_NOTICE, "Before " + action);
  55 });
  56
  57 ////
  58 // all write events
  59 //
  60 Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
  61     App.setAlert(true, action + ':' + res.message);
  62 });
  63
  64 ////
  65 // all exception events
  66 //
  67 Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
  68     App.setAlert(false, "Something bad happend while executing " + action);
  69 });
  70
  71 // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
  72 var userColumns =  [
  73     {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
  74     {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
  75     {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
  76     {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
  77 ];
  78
  79
  80 Ext.onReady(function() {
  81     Ext.QuickTips.init();
  82
  83     // use RowEditor for editing
  84     var editor = new Ext.ux.grid.RowEditor({
  85         saveText: 'Update'
  86     });
  87
  88     // Create a typical GridPanel with RowEditor plugin
  89     var userGrid = new Ext.grid.GridPanel({
  90         renderTo: 'user-grid',
  91         iconCls: 'icon-grid',
  92         frame: true,
  93         title: 'Users',
  94         autoScroll: true,
  95         height: 300,
  96         store: store,
  97         plugins: [editor],
  98         columns : userColumns,
  99         tbar: [{
 100             text: 'Add',
 101             iconCls: 'silk-add',
 102             handler: onAdd
 103         }, '-', {
 104             text: 'Delete',
 105             iconCls: 'silk-delete',
 106             handler: onDelete
 107         }, '-'],
 108         viewConfig: {
 109             forceFit: true
 110         }
 111     });
 112
 113     /**
 114      * onAdd
 115      */
 116     function onAdd(btn, ev) {
 117         var u = new userGrid.store.recordType({
 118             first : '',
 119             last: '',
 120             email : ''
 121         });
 122         editor.stopEditing();
 123         userGrid.store.insert(0, u);
 124         editor.startEditing(0);
 125     }
 126     /**
 127      * onDelete
 128      */
 129     function onDelete() {
 130         var rec = userGrid.getSelectionModel().getSelected();
 131         if (!rec) {
 132             return false;
 133         }
 134         userGrid.store.remove(rec);
 135     }
 136
 137 });