创建简单的grid

 // vim: sw=4:ts=4:nu:nospell:fdc=4
/**
 * Displaying 1:n Data Example
 *
 * @author Ing. Jozef art liu
 * @copyright (c) 2008, by  lilysoft
 * @date 11. May 2008
 * @version $Id: one2many.js 70 2008-05-12 22:27:12Z jozo $
 */

/* global Ext, Example */

// init globals
Ext.ns('Example');
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';

/**
 * @class Example.Grid
 * @extends Ext.grid.GridPanel
 */
Example.Grid = Ext.extend(Ext.grid.GridPanel, {

   // configurables
   border : false,
   initComponent : function() {

    // pre-configure the grid
    Ext.apply(this, {

       // store
       store : new Ext.data.JsonStore({
        id : 'persID',
        root : 'rows',
        totalProperty : 'totalCount',
        url : 'process-request.php',
        baseParams : {
         cmd : 'getData',
         objName : 'person'
        },
        fields : [{
           name : 'persID',
           type : 'int'
          }, {
           name : 'persFirstName',
           type : 'string'
          }, {
           name : 'persMidName',
           type : 'string'
          }, {
           name : 'persLastName',
           type : 'string'
          }, {
           name : 'persNote',
           type : 'string'
          }, {
           name : 'phones',
           type : 'string'
          }]
       }),

       // column model
       
       columns : [{
          dataIndex : 'persFirstName',
          header : 'First',
          width : 50
         }, {
          dataIndex : 'persMidName',
          header : 'Middle',
          width : 40
         }, {
          dataIndex : 'persLastName',
          header : 'Last',
          width : 80

         }, {
          dataIndex : 'persNote',
          header : 'Note',
          width : 200
         }],

       // force fit
       
       viewConfig : {
        forceFit : true
       }

      }); // eo apply

    // call parent
    Example.Grid.superclass.initComponent.apply(this, arguments);

   }, // eo function initComponent
   // }}}
   // {{{
   
   onRender : function() {

    // call parent
    Example.Grid.superclass.onRender.apply(this, arguments);

    // load store
    this.store.load();

   } // eo function onRender
   
   

  }); // eo extend

// register xtype
Ext.reg('examplegrid', Example.Grid);

// application main entry point
Ext.onReady(function() {

 // initialize
 Ext.QuickTips.init();

 var win = new Ext.Window({
  width : 500,
  height : 300,
  id : 'one2many-win',
  layout : 'fit',
  autoScroll : true,
  // ,title:Ext.getDom('page-title').innerHTML
  
  items : [{
   xtype : 'examplegrid',
   id : 'one2many-grid'
  }]
 });
 win.show();

}); // eo function onReady

// eof