<p>EXT Grid主要用于模拟表格形式的数据展示。
要使用Ext Grid,首先需要配置列模式和数据存储,然后可以加上顶部工具按钮和底部分页工具栏等。
一个典型的Ext Grid创建如下:
// 用于读取后台返回的JSON格式数据。格式类似:{"total":10, "results":[{},{}]}
var reader = new Ext.data.JsonReader({
totalProperty : "total", //表示json的total字段
root : "results", //表示json的result字段
id : "id"
}, Ext.data.Record.create([ {
name : "id",
type : "int"
}, {
name : "name",
type : "string"
}, {
name : "cardnum",
type : "int"
}])
);
// 定义数据集对象
var store = new Ext.data.Store({
autoLoad : false,
reader : reader,
proxy : new Ext.data.HttpProxy({
//这里__path是request.getContextPath(),后面加上action
url : __path + "/yourNamespace/yourAction.do"
})
});
// Grid表格组件列内容的列模式
var columns = new Ext.grid.ColumnModel({
defaults : {
sortable : true
},
columns : [ new Ext.grid.RowNumberer(),
{
header : "学号",
width : 80,
dataIndex : "id",
align : "left"
}, {
header : "姓名",
width : 40,
dataIndex : "name",
align : "left"
}, {
header : "卡号",
width : 60,
dataIndex : "cardnum",
align : "left"
}]
});
// 创建分页组件
var pagingBar = new Ext.PagingToolbar({
pageSize : 10,
displayInfo : true,
store : store
});
// 创建Grid
var configGrid = new Ext.grid.GridPanel({
id : "grid",
name : "grid",
title : "信息表",
applyTo : "grid-div", //指定映射的DIV
trackMouseOver : true,
disableSelection : false,
frame : true, //frame显示
bbar : pagingBar, //底部分页工具
store : store, //数据源
collapsible: false, //自动展开折叠
columnLines : true, //列分割标识
stripeRows : true, //隔行颜色不同
enableHdMenu : false, //取消隐藏列的功能
shim : true,
trackMouseOver : true,
loadMask : true,
// 设置页面的高度自适应,下方的工具栏和grid在一起
autoHeight : true,
autoScroll:true,
//如果有选择列,要设置选择模式
selModel : false,
minColumnWidth : 40,
viewConfig : {
forceFit : true, //自动调整column的宽度
enableRowBody : false,
showPreview : false,
scrollOffset: -1 //去除右边的纵向滚动条空位
},
colModel : columns
});
store.load({
params : {
start : 0,
limit : 10
},
add : false
});