X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/restful/restful.js?ds=inline

diff --git a/examples/restful/restful.js b/examples/restful/restful.js
index b579d11f..a4e74cc3 100644
--- a/examples/restful/restful.js
+++ b/examples/restful/restful.js
@@ -1,113 +1,128 @@
-/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * 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'
-}, [
-    {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();
-
-// 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
-    listeners: {
-        write : function(store, action, result, response, rs) {
-            App.setAlert(response.success, response.message);
+    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()));
+                
+            }
         }
-    }
-});
-
-// 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({})}
-];
-
-// load the store immeditately
-store.load();
-
-Ext.onReady(function() {
-    Ext.QuickTips.init();
-
-    // use RowEditor for editing
-    var editor = new Ext.ux.grid.RowEditor({
-        saveText: 'Update'
     });
-
-    // 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);
-    }
-
 });