X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/530ef4b6c5b943cfa68b779d11cf7de29aa878bf..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/restful/restful.js diff --git a/examples/restful/restful.js b/examples/restful/restful.js index 3ce531e4..a4e74cc3 100644 --- a/examples/restful/restful.js +++ b/examples/restful/restful.js @@ -1,137 +1,128 @@ -/*! - * Ext JS Library 3.2.1 - * Copyright(c) 2006-2010 Ext JS, Inc. - * licensing@extjs.com - * http://www.extjs.com/license - */ -// Application instance for showing user-feedback messages. -var App = new Ext.App({}); +Ext.require(['Ext.data.*', 'Ext.grid.*']); -// Create a standard HttpProxy instance. -var proxy = new Ext.data.HttpProxy({ - url: 'app.php/users' +Ext.define('Person', { + extend: 'Ext.data.Model', + fields: [{ + name: 'id', + type: 'int', + useNull: true + }, 'email', 'first', 'last'], + validations: [{ + type: 'length', + field: 'email', + min: 1 + }, { + type: 'length', + field: 'first', + min: 1 + }, { + type: 'length', + field: 'last', + min: 1 + }] }); -// 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', - messageProperty: 'message' // <-- New "messageProperty" meta-data -}, [ - {name: 'id'}, - {name: 'email', allowBlank: false}, - {name: 'first', allowBlank: false}, - {name: 'last', allowBlank: false} -]); +Ext.onReady(function(){ -// The new DataWriter component. -var writer = new Ext.data.JsonWriter({ - encode: false // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params -}); - -// 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 -}); - -// load the store immeditately -store.load(); - -//// -// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception" -// upon Ext.data.DataProxy class. This is handy for centralizing user-feedback messaging into one place rather than -// attaching listenrs to EACH Store. -// -// Listen to all DataProxy beforewrite events -// -Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) { - App.setAlert(App.STATUS_NOTICE, "Before " + action); -}); - -//// -// all write events -// -Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) { - App.setAlert(true, action + ':' + res.message); -}); - -//// -// all exception events -// -Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) { - App.setAlert(false, "Something bad happend while executing " + action); -}); - -// 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({})} -]; - - -Ext.onReady(function() { - Ext.QuickTips.init(); - - // use RowEditor for editing - var editor = new Ext.ux.grid.RowEditor({ - saveText: 'Update' + var store = Ext.create('Ext.data.Store', { + autoLoad: true, + autoSync: true, + model: 'Person', + proxy: { + type: 'rest', + url: 'app.php/users', + reader: { + type: 'json', + root: 'data' + }, + writer: { + type: 'json' + } + }, + listeners: { + write: function(store, operation){ + var record = operation.records[0], + name = Ext.String.capitalize(operation.action), + verb; + + if (name == 'Destroy') { + verb = 'Destroyed'; + } else { + verb = name + 'd'; + } + Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId())); + + } + } }); - - // Create a typical GridPanel with RowEditor plugin - var userGrid = new Ext.grid.GridPanel({ - renderTo: 'user-grid', - iconCls: 'icon-grid', + + var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); + + var grid = Ext.create('Ext.grid.Panel', { + renderTo: document.body, + plugins: [rowEditing], + width: 400, + height: 300, 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 - } + iconCls: 'icon-user', + columns: [{ + text: 'ID', + width: 40, + sortable: true, + dataIndex: 'id', + renderer: function(v){ + if (Ext.isEmpty(v)) { + v = ' '; + } + return v; + } + }, { + text: 'Email', + flex: 1, + sortable: true, + dataIndex: 'email', + field: { + xtype: 'textfield' + } + }, { + header: 'First', + width: 80, + sortable: true, + dataIndex: 'first', + field: { + xtype: 'textfield' + } + }, { + text: 'Last', + width: 80, + sortable: true, + dataIndex: 'last', + field: { + xtype: 'textfield' + } + }], + dockedItems: [{ + xtype: 'toolbar', + items: [{ + text: 'Add', + iconCls: 'icon-add', + handler: function(){ + // empty record + store.insert(0, new Person()); + rowEditing.startEdit(0, 0); + } + }, '-', { + text: 'Delete', + iconCls: 'icon-delete', + handler: function(){ + var selection = grid.getView().getSelectionModel().getSelection()[0]; + if (selection) { + store.remove(selection); + } + } + }] + }] }); - - /** - * 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); - } - });