Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / examples / restful / restful.js
1 /*!
2  * Ext JS Library 3.0.3
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     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 });