writer.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:3k
源码类别:

中间件编程

开发平台:

JavaScript

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