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>