Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / restful.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">// Application instance for showing user-feedback messages.
9 var App = new Ext.App({});
10
11 // Create a standard HttpProxy instance.
12 var proxy = new Ext.data.HttpProxy({
13     url: 'app.php/users'
14 });
15
16 // Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
17 var reader = new Ext.data.JsonReader({
18     totalProperty: 'total',
19     successProperty: 'success',
20     idProperty: 'id',
21     root: '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
32 // Typical Store collecting the Proxy, Reader and Writer together.
33 var store = new Ext.data.Store({
34     id: 'user',
35     restful: true,     // <-- This Store is RESTful
36     proxy: proxy,
37     reader: reader,
38     writer: writer,    // <-- plug a DataWriter into the store just as you would a Reader
39     listeners: {
40         write : function(store, action, result, response, rs) {
41             App.setAlert(response.success, response.message);
42         }
43     }
44 });
45
46 // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
47 var userColumns =  [
48     {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
49     {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
50     {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({})},
51     {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}
52 ];
53
54 // load the store immeditately
55 store.load();
56
57 Ext.onReady(function() {
58     Ext.QuickTips.init();
59
60     // use RowEditor for editing
61     var editor = new Ext.ux.grid.RowEditor({
62         saveText: 'Update'
63     });
64
65     // Create a typical GridPanel with RowEditor plugin
66     var userGrid = new Ext.grid.GridPanel({
67         renderTo: 'user-grid',
68         iconCls: 'icon-grid',
69         frame: true,
70         title: 'Users',
71         autoScroll: true,
72         height: 300,
73         store: store,
74         plugins: [editor],
75         columns : userColumns,
76         tbar: [{
77             text: 'Add',
78             iconCls: 'silk-add',
79             handler: onAdd
80         }, '-', {
81             text: 'Delete',
82             iconCls: 'silk-delete',
83             handler: onDelete
84         }, '-'],
85         viewConfig: {
86             forceFit: true
87         }
88     });
89
90     <div id="prop-Ext.ux.TaskBar.TaskButton-function"></div>/**
91      * onAdd
92      */
93     function onAdd(btn, ev) {
94         var u = new userGrid.store.recordType({
95             first : '',
96             last: '',
97             email : ''
98         });
99         editor.stopEditing();
100         userGrid.store.insert(0, u);
101         editor.startEditing(0);
102     }
103     <div id="prop-Ext.ux.TaskBar.TaskButton-function"></div>/**
104      * onDelete
105      */
106     function onDelete() {
107         var rec = userGrid.getSelectionModel().getSelected();
108         if (!rec) {
109             return false;
110         }
111         userGrid.store.remove(rec);
112     }
113
114 });
115 </pre>    \r
116 </body>\r
117 </html>