X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/restful.html
diff --git a/docs/source/restful.html b/docs/source/restful.html
new file mode 100644
index 00000000..e20bfb6e
--- /dev/null
+++ b/docs/source/restful.html
@@ -0,0 +1,117 @@
+
+
+ The source code
+
+
+
+
+ // Application instance for showing user-feedback messages.
+var App = new Ext.App({});
+
+// Create a standard HttpProxy instance.
+var proxy = new Ext.data.HttpProxy({
+ url: 'app.php/users'
+});
+
+// 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}
+]);
+
+// 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);
+ }
+ }
+});
+
+// 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',
+ 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
+ }
+ });
+
+ /**
+ * 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);
+ }
+
+});
+
+
+
\ No newline at end of file