Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / examples / writer / writer.js
1 /*!
2  * Ext JS Library 3.1.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 HttpProxy instance.  Notice new configuration parameter "api" here instead of load.  However, you can still use
11 // the "url" paramater -- All CRUD requests will be directed to your single url instead.
12 var proxy = new Ext.data.HttpProxy({
13     api: {
14         read : 'app.php/users/view',
15         create : 'app.php/users/create',
16         update: 'app.php/users/update',
17         destroy: 'app.php/users/destroy'
18     }
19 });
20
21 // Typical JsonReader.  Notice additional meta-data params for defining the core attributes of your json-response
22 var reader = new Ext.data.JsonReader({
23     totalProperty: 'total',
24     successProperty: 'success',
25     idProperty: 'id',
26     root: 'data',
27     messageProperty: 'message'  // <-- New "messageProperty" meta-data
28 }, [
29     {name: 'id'},
30     {name: 'email', allowBlank: false},
31     {name: 'first', allowBlank: false},
32     {name: 'last', allowBlank: false}
33 ]);
34
35 // The new DataWriter component.
36 var writer = new Ext.data.JsonWriter({
37     encode: true,
38     writeAllFields: false
39 });
40
41 // Typical Store collecting the Proxy, Reader and Writer together.
42 var store = new Ext.data.Store({
43     id: 'user',
44     proxy: proxy,
45     reader: reader,
46     writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
47     autoSave: true // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
48 });
49
50 // load the store immeditately
51 store.load();
52
53 ////
54 // ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
55 // upon Ext.data.DataProxy class.  This is handy for centralizing user-feedback messaging into one place rather than
56 // attaching listenrs to EACH Store.
57 //
58 // Listen to all DataProxy beforewrite events
59 //
60 Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
61     App.setAlert(App.STATUS_NOTICE, "Before " + action);
62 });
63
64 ////
65 // all write events
66 //
67 Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
68     App.setAlert(true, action + ':' + res.message);
69 });
70
71 ////
72 // all exception events
73 //
74 Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
75     if (type === 'remote') {
76         Ext.Msg.show({
77             title: 'REMOTE EXCEPTION',
78             msg: res.message,
79             icon: Ext.MessageBox.ERROR,
80             buttons: Ext.Msg.OK
81         });
82     }
83 });
84
85 // A new generic text field
86 var textField =  new Ext.form.TextField();
87
88 // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
89 var userColumns =  [
90     {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
91     {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: textField},
92     {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: textField},
93     {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: textField}
94 ];
95
96 Ext.onReady(function() {
97     Ext.QuickTips.init();
98
99     // create user.Form instance (@see UserForm.js)
100     var userForm = new App.user.Form({
101         renderTo: 'user-form',
102         listeners: {
103             create : function(fpanel, data) {   // <-- custom "create" event defined in App.user.Form class
104                 var rec = new userGrid.store.recordType(data);
105                 userGrid.store.insert(0, rec);
106             }
107         }
108     });
109
110     // create user.Grid instance (@see UserGrid.js)
111     var userGrid = new App.user.Grid({
112         renderTo: 'user-grid',
113         store: store,
114         columns : userColumns,
115         listeners: {
116             rowclick: function(g, index, ev) {
117                 var rec = g.store.getAt(index);
118                 userForm.loadRecord(rec);
119             },
120             destroy : function() {
121                 userForm.getForm().reset();
122             }
123         }
124     });
125 });