examples/restful/restful.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 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 }, [
  22     {name: 'id'},
  23     {name: 'email', allowBlank: false},
  24     {name: 'first', allowBlank: false},
  25     {name: 'last', allowBlank: false}
  26 ]);
  27
  28 // The new DataWriter component.
  29 var writer = new Ext.data.JsonWriter();
  30
  31 // Typical Store collecting the Proxy, Reader and Writer together.
  32 var store = new Ext.data.Store({
  33     id: 'user',
  34     restful: true,     // <-- This Store is RESTful
  35     proxy: proxy,
  36     reader: reader,
  37     writer: writer,    // <-- plug a DataWriter into the store just as you would a Reader
  38     listeners: {
  39         write : function(store, action, result, response, rs) {
  40             App.setAlert(response.success, response.message);
  41         }
  42     }
  43 });
  44
  45 // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
  46 var userColumns =  [
  47     {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
  48     {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
  49     {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
  50     {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
  51 ];
  52
  53 // load the store immeditately
  54 store.load();
  55
  56 Ext.onReady(function() {
  57     Ext.QuickTips.init();
  58
  59     // use RowEditor for editing
  60     var editor = new Ext.ux.grid.RowEditor({
  61         saveText: 'Update'
  62     });
  63
  64     // Create a typical GridPanel with RowEditor plugin
  65     var userGrid = new Ext.grid.GridPanel({
  66         renderTo: 'user-grid',
  67         iconCls: 'icon-grid',
  68         frame: true,
  69         title: 'Users',
  70         autoScroll: true,
  71         height: 300,
  72         store: store,
  73         plugins: [editor],
  74         columns : userColumns,
  75         tbar: [{
  76             text: 'Add',
  77             iconCls: 'silk-add',
  78             handler: onAdd
  79         }, '-', {
  80             text: 'Delete',
  81             iconCls: 'silk-delete',
  82             handler: onDelete
  83         }, '-'],
  84         viewConfig: {
  85             forceFit: true
  86         }
  87     });
  88
  89     /**
  90      * onAdd
  91      */
  92     function onAdd(btn, ev) {
  93         var u = new userGrid.store.recordType({
  94             first : '',
  95             last: '',
  96             email : ''
  97         });
  98         editor.stopEditing();
  99         userGrid.store.insert(0, u);
 100         editor.startEditing(0);
 101     }
 102     /**
 103      * onDelete
 104      */
 105     function onDelete() {
 106         var rec = userGrid.getSelectionModel().getSelected();
 107         if (!rec) {
 108             return false;
 109         }
 110         userGrid.store.remove(rec);
 111     }
 112
 113 });