Creating a writer is simple:
*
-var writer = new Ext.data.JsonWriter();
+var writer = new Ext.data.JsonWriter({
+ encode: false // <--- false causes data to be printed to jsonData config-property of Ext.Ajax#reqeust
+});
+ * Same old JsonReader as Ext-2.x:
+ *
+var reader = new Ext.data.JsonReader({idProperty: 'id'}, [{name: 'first'}, {name: 'last'}, {name: 'email'}]);
* The proxy for a writer enabled store can be configured with a simple url:
// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
- url: 'app.php/users'
+ url: 'app.php/users' // <--- Supports "provides"-type urls, such as '/users.json', '/products.xml' (Hello Rails/Merb)
});
* For finer grained control, the proxy may also be configured with an api:
For finer grained control, the proxy may also be configured with an API:
-// Use the api specification
+// Maximum flexibility with the API-configuration
var proxy = new Ext.data.HttpProxy({
api: {
read : 'app.php/users/read',
create : 'app.php/users/create',
update : 'app.php/users/update',
- destroy : 'app.php/users/destroy'
+ destroy : { // <--- Supports object-syntax as well
+ url: 'app.php/users/destroy',
+ method: "DELETE"
+ }
}
});
* Creating a Writer enabled store:
+ *Pulling it all together into a Writer-enabled Store:
+ *
+var store = new Ext.data.Store({
+ proxy: proxy,
+ reader: reader,
+ writer: writer,
+ autoLoad: true,
+ autoSave: true // -- Cell-level updates.
+});
+ * Initiating write-actions automatically, using the existing Ext2.0 Store/Record API:
+ *
+var rec = store.getAt(0);
+rec.set('email', 'foo@bar.com'); // <--- Immediately initiates an UPDATE action through configured proxy.
+
+store.remove(rec); // <---- Immediately initiates a DESTROY action through configured proxy.
+ * For record/batch updates, use the Store-configuration {@link Ext.data.Store#autoSave autoSave:false}
*
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
- writer: writer
+ writer: writer,
+ autoLoad: true,
+ autoSave: false // -- disable cell-updates
});
+
+var urec = store.getAt(0);
+urec.set('email', 'foo@bar.com');
+
+var drec = store.getAt(1);
+store.remove(drec);
+
+// Push the button!
+store.save();
* <tpl for="."><{name}>{value}</{name}</tpl>{id: 1, first: 'foo', last: 'bar'} --> [{name: 'id', value: 1}, {name: 'first', value: 'foo'}, {name: 'last', value: 'bar'}]