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