writer.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:4k
源码类别:

JavaScript

开发平台:

JavaScript

  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. // 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.     messageProperty: 'message'  // <-- New "messageProperty" meta-data
  26. }, [
  27.     {name: 'id'},
  28.     {name: 'email', allowBlank: false},
  29.     {name: 'first', allowBlank: false},
  30.     {name: 'last', allowBlank: false}
  31. ]);
  32. // The new DataWriter component.
  33. var writer = new Ext.data.JsonWriter({
  34.     encode: true,
  35.     writeAllFields: false
  36. });
  37. // Typical Store collecting the Proxy, Reader and Writer together.
  38. var store = new Ext.data.Store({
  39.     id: 'user',
  40.     proxy: proxy,
  41.     reader: reader,
  42.     writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
  43.     autoSave: true // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
  44. });
  45. // load the store immeditately
  46. store.load();
  47. ////
  48. // ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
  49. // upon Ext.data.DataProxy class.  This is handy for centralizing user-feedback messaging into one place rather than
  50. // attaching listenrs to EACH Store.
  51. //
  52. // Listen to all DataProxy beforewrite events
  53. //
  54. Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
  55.     App.setAlert(App.STATUS_NOTICE, "Before " + action);
  56. });
  57. ////
  58. // all write events
  59. //
  60. Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
  61.     App.setAlert(true, action + ':' + res.message);
  62. });
  63. ////
  64. // all exception events
  65. //
  66. Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
  67.     if (type === 'remote') {
  68.         Ext.Msg.show({
  69.             title: 'REMOTE EXCEPTION',
  70.             msg: res.message,
  71.             icon: Ext.MessageBox.ERROR,
  72.             buttons: Ext.Msg.OK
  73.         });
  74.     }
  75. });
  76. // A new generic text field
  77. var textField =  new Ext.form.TextField();
  78. // Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
  79. var userColumns =  [
  80.     {header: "ID", width: 40, sortable: true, dataIndex: 'id'},
  81.     {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: textField},
  82.     {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: textField},
  83.     {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: textField}
  84. ];
  85. Ext.onReady(function() {
  86.     Ext.QuickTips.init();
  87.     // create user.Form instance (@see UserForm.js)
  88.     var userForm = new App.user.Form({
  89.         renderTo: 'user-form',
  90.         listeners: {
  91.             create : function(fpanel, data) {   // <-- custom "create" event defined in App.user.Form class
  92.                 var rec = new userGrid.store.recordType(data);
  93.                 userGrid.store.insert(0, rec);
  94.             }
  95.         }
  96.     });
  97.     // create user.Grid instance (@see UserGrid.js)
  98.     var userGrid = new App.user.Grid({
  99.         renderTo: 'user-grid',
  100.         store: store,
  101.         columns : userColumns,
  102.         listeners: {
  103.             rowclick: function(g, index, ev) {
  104.                 var rec = g.store.getAt(index);
  105.                 userForm.loadRecord(rec);
  106.             },
  107.             destroy : function() {
  108.                 userForm.getForm().reset();
  109.             }
  110.         }
  111.     });
  112. });