docs/source/UserGrid.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Ext.ns('App', 'App.user');
   9 <div id="prop-Ext.ux.TaskBar.TaskButton-Grid"></div>/**
  10  * App.user.Grid
  11  * A typical EditorGridPanel extension.
  12  */
  13 App.user.Grid = Ext.extend(Ext.grid.EditorGridPanel, {
  14     renderTo: 'user-grid',
  15     iconCls: 'silk-grid',
  16     frame: true,
  17     title: 'Users',
  18     height: 300,
  19     width: 500,
  20     style: 'margin-top: 10px',
  21
  22     initComponent : function() {
  23
  24         // typical viewConfig
  25         this.viewConfig = {
  26             forceFit: true
  27         };
  28
  29         // relay the Store's CRUD events into this grid so these events can be conveniently listened-to in our application-code.
  30         this.relayEvents(this.store, ['destroy', 'save', 'update']);
  31
  32         // build toolbars and buttons.
  33         this.tbar = this.buildTopToolbar();
  34         this.bbar = this.buildBottomToolbar();
  35         this.buttons = this.buildUI();
  36
  37         // super
  38         App.user.Grid.superclass.initComponent.call(this);
  39     },
  40
  41     <div id="method-Ext.ux.TaskBar.TaskButton-buildTopToolbar"></div>/**
  42      * buildTopToolbar
  43      */
  44     buildTopToolbar : function() {
  45         return [{
  46             text: 'Add',
  47             iconCls: 'silk-add',
  48             handler: this.onAdd,
  49             scope: this
  50         }, '-', {
  51             text: 'Delete',
  52             iconCls: 'silk-delete',
  53             handler: this.onDelete,
  54             scope: this
  55         }, '-'];
  56     },
  57
  58     <div id="method-Ext.ux.TaskBar.TaskButton-buildBottomToolbar"></div>/**
  59      * buildBottomToolbar
  60      */
  61     buildBottomToolbar : function() {
  62         return ['<b>@cfg:</b>', '-', {
  63             text: 'autoSave',
  64             enableToggle: true,
  65             pressed: true,
  66             tooltip: 'When enabled, Store will execute Ajax requests as soon as a Record becomes dirty.',
  67             toggleHandler: function(btn, pressed) {
  68                 this.store.autoSave = pressed;
  69             },
  70             scope: this
  71         }, '-', {
  72             text: 'batch',
  73             enableToggle: true,
  74             pressed: true,
  75             tooltip: 'When enabled, Store will batch all records for each type of CRUD verb into a single Ajax request.',
  76             toggleHandler: function(btn, pressed) {
  77                 this.store.batch = pressed;
  78             },
  79             scope: this
  80         }, '-', {
  81             text: 'writeAllFields',
  82             enableToggle: true,
  83             tooltip: 'When enabled, Writer will write *all* fields to the server -- not just those that changed.',
  84             toggleHandler: function(btn, pressed) {
  85                 store.writer.writeAllFields = pressed;
  86             },
  87             scope: this
  88         }, '-'];
  89     },
  90
  91     <div id="method-Ext.ux.TaskBar.TaskButton-buildUI"></div>/**
  92      * buildUI
  93      */
  94     buildUI : function() {
  95         return [{
  96             text: 'Save',
  97             iconCls: 'icon-save',
  98             handler: this.onSave,
  99             scope: this
 100         }];
 101     },
 102
 103     <div id="method-Ext.ux.TaskBar.TaskButton-onSave"></div>/**
 104      * onSave
 105      */
 106     onSave : function(btn, ev) {
 107         this.store.save();
 108     },
 109
 110     <div id="method-Ext.ux.TaskBar.TaskButton-onAdd"></div>/**
 111      * onAdd
 112      */
 113     onAdd : function(btn, ev) {
 114         var u = new this.store.recordType({
 115             first : '',
 116             last: '',
 117             email : ''
 118         });
 119         this.stopEditing();
 120         this.store.insert(0, u);
 121         this.startEditing(0, 1);
 122     },
 123
 124     <div id="method-Ext.ux.TaskBar.TaskButton-onDelete"></div>/**
 125      * onDelete
 126      */
 127     onDelete : function(btn, ev) {
 128         var index = this.getSelectionModel().getSelectedCell();
 129         if (!index) {
 130             return false;
 131         }
 132         var rec = this.store.getAt(index[0]);
 133         this.store.remove(rec);
 134     }
 135 });
 136 </pre>    \r
 137 </body>\r
 138 </html>