Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / restful / restful.js
index 49b79fc..a4e74cc 100644 (file)
-/*!
- * Ext JS Library 3.2.2
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-// Application instance for showing user-feedback messages.
-var App = new Ext.App({});
+Ext.require(['Ext.data.*', 'Ext.grid.*']);
 
-// Create a standard HttpProxy instance.
-var proxy = new Ext.data.HttpProxy({
-    url: 'app.php/users'
+Ext.define('Person', {
+    extend: 'Ext.data.Model',
+    fields: [{
+        name: 'id',
+        type: 'int',
+        useNull: true
+    }, 'email', 'first', 'last'],
+    validations: [{
+        type: 'length',
+        field: 'email',
+        min: 1
+    }, {
+        type: 'length',
+        field: 'first',
+        min: 1
+    }, {
+        type: 'length',
+        field: 'last',
+        min: 1
+    }]
 });
 
-// Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
-var reader = new Ext.data.JsonReader({
-    totalProperty: 'total',
-    successProperty: 'success',
-    idProperty: 'id',
-    root: 'data',
-    messageProperty: 'message'  // <-- New "messageProperty" meta-data
-}, [
-    {name: 'id'},
-    {name: 'email', allowBlank: false},
-    {name: 'first', allowBlank: false},
-    {name: 'last', allowBlank: false}
-]);
+Ext.onReady(function(){
 
-// The new DataWriter component.
-var writer = new Ext.data.JsonWriter({
-    encode: false   // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
-});
-
-// Typical Store collecting the Proxy, Reader and Writer together.
-var store = new Ext.data.Store({
-    id: 'user',
-    restful: true,     // <-- This Store is RESTful
-    proxy: proxy,
-    reader: reader,
-    writer: writer    // <-- plug a DataWriter into the store just as you would a Reader
-});
-
-// load the store immeditately
-store.load();
-
-////
-// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
-// upon Ext.data.DataProxy class.  This is handy for centralizing user-feedback messaging into one place rather than
-// attaching listenrs to EACH Store.
-//
-// Listen to all DataProxy beforewrite events
-//
-Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
-    App.setAlert(App.STATUS_NOTICE, "Before " + action);
-});
-
-////
-// all write events
-//
-Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
-    App.setAlert(true, action + ':' + res.message);
-});
-
-////
-// all exception events
-//
-Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
-    App.setAlert(false, "Something bad happend while executing " + action);
-});
-
-// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
-var userColumns =  [
-    {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
-    {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
-    {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
-    {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
-];
-
-
-Ext.onReady(function() {
-    Ext.QuickTips.init();
-
-    // use RowEditor for editing
-    var editor = new Ext.ux.grid.RowEditor({
-        saveText: 'Update'
+    var store = Ext.create('Ext.data.Store', {
+        autoLoad: true,
+        autoSync: true,
+        model: 'Person',
+        proxy: {
+            type: 'rest',
+            url: 'app.php/users',
+            reader: {
+                type: 'json',
+                root: 'data'
+            },
+            writer: {
+                type: 'json'
+            }
+        },
+        listeners: {
+            write: function(store, operation){
+                var record = operation.records[0],
+                    name = Ext.String.capitalize(operation.action),
+                    verb;
+                    
+                if (name == 'Destroy') {
+                    verb = 'Destroyed';
+                } else {
+                    verb = name + 'd';
+                }
+                Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
+                
+            }
+        }
     });
-
-    // Create a typical GridPanel with RowEditor plugin
-    var userGrid = new Ext.grid.GridPanel({
-        renderTo: 'user-grid',
-        iconCls: 'icon-grid',
+    
+    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
+    
+    var grid = Ext.create('Ext.grid.Panel', {
+        renderTo: document.body,
+        plugins: [rowEditing],
+        width: 400,
+        height: 300,
         frame: true,
         title: 'Users',
-        autoScroll: true,
-        height: 300,
         store: store,
-        plugins: [editor],
-        columns : userColumns,
-        tbar: [{
-            text: 'Add',
-            iconCls: 'silk-add',
-            handler: onAdd
-        }, '-', {
-            text: 'Delete',
-            iconCls: 'silk-delete',
-            handler: onDelete
-        }, '-'],
-        viewConfig: {
-            forceFit: true
-        }
+        iconCls: 'icon-user',
+        columns: [{
+            text: 'ID',
+            width: 40,
+            sortable: true,
+            dataIndex: 'id',
+            renderer: function(v){
+                if (Ext.isEmpty(v)) {
+                    v = '&#160;';
+                }
+                return v;
+            }
+        }, {
+            text: 'Email',
+            flex: 1,
+            sortable: true,
+            dataIndex: 'email',
+            field: {
+                xtype: 'textfield'
+            }
+        }, {
+            header: 'First',
+            width: 80,
+            sortable: true,
+            dataIndex: 'first',
+            field: {
+                xtype: 'textfield'
+            }
+        }, {
+            text: 'Last',
+            width: 80,
+            sortable: true,
+            dataIndex: 'last',
+            field: {
+                xtype: 'textfield'
+            }
+        }],
+        dockedItems: [{
+            xtype: 'toolbar',
+            items: [{
+                text: 'Add',
+                iconCls: 'icon-add',
+                handler: function(){
+                    // empty record
+                    store.insert(0, new Person());
+                    rowEditing.startEdit(0, 0);
+                }
+            }, '-', {
+                text: 'Delete',
+                iconCls: 'icon-delete',
+                handler: function(){
+                    var selection = grid.getView().getSelectionModel().getSelection()[0];
+                    if (selection) {
+                        store.remove(selection);
+                    }
+                }
+            }]
+        }]
     });
-
-    /**
-     * onAdd
-     */
-    function onAdd(btn, ev) {
-        var u = new userGrid.store.recordType({
-            first : '',
-            last: '',
-            email : ''
-        });
-        editor.stopEditing();
-        userGrid.store.insert(0, u);
-        editor.startEditing(0);
-    }
-    /**
-     * onDelete
-     */
-    function onDelete() {
-        var rec = userGrid.getSelectionModel().getSelected();
-        if (!rec) {
-            return false;
-        }
-        userGrid.store.remove(rec);
-    }
-
 });