创建penelgrid及其一些属性

   排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能.
   继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。

Ext.onReady(function(){

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"中国Java开源产品及团队",

height:150,

width:600,

columns:[{header:"项目名称",dataIndex:"name"},

{header:"开发团队",dataIndex:"organization"},

{header:"网址",dataIndex:"homepage"}],

store:store,

autoExpandColumn:2

});

});

Ext.onReady(function(){

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"中国Java开源产品及团队",

height:150,

width:600,

columns:[{header:"项目名称",dataIndex:"name"},

{header:"开发团队",dataIndex:"organization"},

{header:"网址",dataIndex:"homepage"}],

store:store,

autoExpandColumn:2

});
Ext.onReady(function(){

var data=[ [1, 'EasyJWeb', 'EasyJF','www.easyjf.com'],

[2, 'jfox', 'huihoo','www.huihoo.org'],

[3, 'jdon', 'jdon','www.jdon.com'],

[4, 'springside', 'springside','www.springside.org.cn'] ];

var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});/*数据存储,数据存储器Store负责把各种各样的数据（如二维数组、JSon对象数组、xml文本）等转换成ExtJS的数据记录集Record*/

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"中国Java开源产品及团队",

height:150,

width:600,

columns:[{header:"项目名称",dataIndex:"name"},

{header:"开发团队",dataIndex:"organization"},

{header:"网址",dataIndex:"homepage"}],

store:store,

autoExpandColumn:2

});
第三行“var grid = new Ext.grid.GridPanel(…)”负责创建一个表格，表格包含的列由columns配置属性来描述，columns是一数组，每一行数据元素描述表格的一列信息，表格的列信息包含列头显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sorable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等，在上面的列子中只用到了header及dataIndex。

var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});

var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},

{header:"开发团队",dataIndex:"organization",sortable:true},

{header:"网址",dataIndex:"homepage",renderer:showUrl}]);

var grid = new Ext.grid.GridPanel({

renderTo:"hello",

title:"中国Java开源产品及团队",

height:200,

width:600,

cm:colM,

store:store,

autoExpandColumn:2

});