创建简单的grid

最新推荐文章于 2018-11-06 11:39:30 发布

lqhart

最新推荐文章于 2018-11-06 11:39:30 发布

阅读量429

点赞数

分类专栏： ExtJS 文章标签： function header string application layout url

本文链接：https://blog.csdn.net/lqhart/article/details/2831703

版权

ExtJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

// 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