ExtJS - 创建表格

表格是页面 常用的元素之一，在ExtJS下，创建一个表格的方式如下:

 

---

使用二维数组方式:

 

var data=[

[1,"软件工程","中国"],

[2,"黑客帝国","美国"],

[3,"天气旋下","英国"]

];

 

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

var columnM=new Ext.grid.ColumnModel([         { header: "编号", dataIndex: "name", sortable: true },         { header: "名称", dataIndex: "organization", sortable: true },         { header: "国家", dataIndex: "homepage", sortable: true, renderer: showUrl }//renderer:自定义函数，showUrl(value)         ]);

new Ext.grid.GridPanel({

renderTo:"divdisplay",

title:"表格名",

height:600,

width:"100%",

cm:columnM,

store:store, autoExpandColumn:2//设置第n-1列为自动适应宽度

});

---

以下是使用Json方式：

var data1 = [         {             id: 1,             name: "EasyJWeb1",             organization: "EasyJF",             homepage: "www.easyif.com"         },         {             id: 2,             name: "jfox",             organization: "huihoo",             homepage: "www.huihoo.org"         },         {             id: 3,             name: "springside",             organization: "springside",             homepage: "www.springside.com"         }         ];

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

var columnM = new Ext.grid.ColumnModel([         { header: "项目名称", dataIndex: "name", sortable: true },         { header: "开发团队", dataIndex: "organization", sortable: true },         { header: "网址", dataIndex: "homepage", sortable: true, renderer: showUrl }         ]);

new Ext.grid.GridPanel({             renderTo: "divDisplay",             title: "测试表格",             height: 150,             width: 600,             cm: columnM,             store: store1,             autoExpandColumn: 2         });

---

 

html部分：

 

<div id="divdisplay"></div>