Ext Js 表格（五）

表格由Ext.grid.GridPanel来定义，继承Ext.Panel。表格必须包含列定义信息，并指定表格的数据存储器。表格的列定义信息由Ext.grid.ColumnModel来定义，数据存储信息由Ext.data.Stroe（Ext.data.SimpleStore，Ext.data.JsonStore，Ext.data.GroupingStore）来定义。

类Ext.grid.GridView，GridView类是对Ext.grid.GridPanel用户界面的封装。为 产生特殊的现实效果，可以该类的一些方法来控制用户界面。注意请不要改变用户界面的DOM结构。

ColumnModel负责创建表格的列信息，表格的列信息包含首部的显示文本（header），对应的记录集字段（dataIndex），列是否可排序（sortable），列渲染函数（renderer），宽度（width），格式化（format）信息

一个完整的表格代码：

//复选框，身兼两职，既要放在ColumnModel里,又要放在GridPanel里

var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([

new Ext.grid.RowNumberer(), // 自动显示行号

sm, // columnmodel里

{header: "姓名",

dataIndex: "name",// 对应的记录集字段

enableColumnMove:true, // 列可以拖放

enableColumnResize:true, // 列宽度可变

width: 80, // 舍得列的宽度

sortable: true, //使列可排序

renderer: function(value){// 渲染函数（renderer函数的参数有多个，详细可以查看API文档）

if(value.length> 6){

return"<span style='color:red;'>"+value+"</span>"

}else{

return"<span style='color:blue;'>"+value+"</span>";

}

}

},

{header: "年龄",dataIndex: "age"}

]);

var store = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url:"<%=path%>/test"}),

reader: new Ext.data.JsonReader({

totalProperty: "total", // 该属性指定记录数的总数

root: "root", // 该属性指定包含所有行对象的数组

idProperty: "id" // 记录每一行对象记录id的字段（可选）

},[

{name: "id"},

{name: "name",mapping:"na_me"},

{name: "age",mapping:"a_ge"}

])

});

var grid = new Ext.grid.GridPanel({

renderTo: "grid",

cm: cm,

sm: sm,

store: store,

autoHeight: true,

bbar: new Ext.PagingToolbar({

pageSize:10, // 每页显示几条数据

store: store,

displayInfo: true, // 必须为ture，displayMsg才能显示

displayMsg: "显示第{0}条到第{1}条记录，一共{2}条记录",

emptyMsg: "记录为空" // 没有记录的提示信息

})

});

store.load({

params:{start: 0,limit: 10}// 从0开始，最多取10条

}); // 必须在构造表格后执行，否则分页工具将不起作用

选择模型：

grid.on("click",function(){

// 获得选择模型，通过选择模型选择当前选中的行。

var selections =grid.getSelectionModel().getSelections();

for(var i=0;i<selections.length; i++){

var record =selections[i];

Ext.Msg.alert("提示",record.data.name + "--" + record.get("age")+ "--" + record.get("id"));

}

});

表格视图：Ext.grid.GridView:

Ext.data.Store可以看做model，Ext.grid.GridPanel可以看做controller，而Ext.grid.GridView可以看做view，通常情况下不用创建GridView的实例，GridPanel可以自动创建GridView的实例，可以通过gird.getView()获取当前的实例。我们可以在创建GridPanel时，通过viewConfig参数，作为初始化参数传递给GridView。

常用参数：

forceFit: true时，表格自动延伸每列长度，使内容填充表格。

ColumnText、sortAscText、sortDescText设置每列下拉菜单中得“显示的列”、“升序”、“降序”这三个部分的显示文字。