examples/writer/UserGrid.js

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