Extjs GridPanel 表格

Extjs GridPanel表格
表格困扰了我几天的时间，在网上搜的资料太完整了，完整到有点复杂的程度，以至于不太适合我这种菜鸟级别的初学者。现在终于搞出来了，所以我想拿一个简单的例子来分享一下。希望能帮助后来的人提供一个参考。
Ext表格当然首先选择的就是grid里面的GridPanel，
那么首先就来认识一下GridPanel
New Ext.grid.GridPane({
title : ’标题’, //title顾名思义就是定义一个标题的意思。
height : 高度, //height 设置表格框架的高度。
width : 宽度, //设置表格框架的宽度
store: ’ 数据源○1’, //数据源是指存储数据的地方，这是一个必选配置项，下面再详细说明
colModel：’列模型’， //暂且这么理解吧，在里面设置表头，这里也可以用colModel的简写cm;这是一个必选配置项。
selModel:’选区模型’ , //控制鼠标停在某一行时所显示的效果。
})
1． 定义一个数据源的方式，可以直接在store配置项上创建一个Ext.data.Store对象store: new Ext.data.SimpleStore({……配置项………})

2．	Ext.onReady(function(){
3．	
4．	 /*给GridPanel 表格配一个数据源 store*/
5．	
6．	 var store = new Ext.data.SimpleStore({
7．	 fields:["id","name","age"], //相当于此列的属性（name）,一定要与ColumnModel中的dataIndex:相对应。
8．	 data:[	 //data是一个二维数据，存储表格中的数据，表格会从这里读取。
9．	 ["1","a","12"],	 //这里表示第一行第一格数据为1，依此类推...
10．	 ["2","b","11"]]
11．	 })
12．	 var cm = new Ext.grid.ColumnModel([//创建一个列模型，创建表头。
13．	 new Ext.grid.RowNumberer(),	 //设置表的第一列为序列号，也可以设置为选框，
14．	 {header:'ID',dataIndex:'id'},	//表头ID
15．	 {header:'姓名',dataIndex:'name'},//姓名
16．	 {header:'年龄',dataIndex:'age'} //年龄
17．	 ]);
18．	 var grid = new Ext.grid.GridPanel({
19．	 title:'测试',
20．	 frame:true,
21．	 height:150,
22．	 width:200,
23．	 store:store,
24．	 cm:cm,
25．	 /*columns:[
26．	 {header: "ID", width: 200, sortable: true, dataIndex: 'id'},
27．	 {header:"姓名", width: 200, sortable: true, dataIndex: 'name'},
28．	 {header: "年龄", width: 200, sortable: true, dataIndex: 'age'},
29．	 ],*/ //这里可以用代替cm，这项开启后，把cm去掉！
30．	//创建一个选区模型
31．	 sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
32．	 viewConfig: {
33．	 forceFit: true
34．	 },
35．	 });
36．	
37．	 grid.render(document.body); 
38．	})

Ok!表格做好了！就是下面这个呵呵。。。拷过去试试！