ExtJS中的grid 简单创建

lqhart

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