代码主要参考ext 2.0的example ,这里加上自己的注释,包括某些参数的含义.
使用ext2.0创建表格很简单:
第一:准备表头,使用Ext.grid.ColumnModel
第二:准备数据,使用Ext.data.Store
第三:创建表格,使用Ext.grid.GridPanel,同时把以上的表头和数据放进去。
Ext.onReady(function() {
/**
* 首先是创建表格的ColumnModel,即定义grid的各个列:
* Ext.grid.ColumnModel([{
* id: 列的唯一标识,可以用于定义css,如:(.x-grid-td-topic b { color:#333 })
* header: 列的名称
* dataIndex: 在store中本列值的索引
* sortable: 设置本列是否支持排序
* renderer: 列值的渲染函数,定义函数如:function renderName(value, cellmeta, record, rowIndex, columnIndex, store){}
* width : 列宽
* hidden:true 是否隐藏本列
* }]);
*/
var sm = new Ext.grid.CheckboxSelectionModel();// 多选行
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
header : '编号',
dataIndex : 'id',
sortable : true
}, {
id : 'topic',
header : '名称',
dataIndex : 'name',
renderer : renderName,
width : 150
}, {
id : 'topic',
header : '描述',
renderer : renderName,
dataIndex : 'descn'
}]);
/**
* 准备数据,
*/
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'gridDataJson.jsp'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root',
fields : [{
name : 'id'
}, {
name : 'name'
}, {
name : 'descn'
}]
}),
remoteSort : true
});
/**
* 创建表格面板,各参数见下注释
*
*/
var grid = new Ext.grid.GridPanel({
width : 450,
height : 275,
//title : 'Ext表格控件',
el : 'grid-div', //表格依附对象id ,一般是一个DIV
ds : ds,// store : ds, //表格数据对象:Ext.data.Store
cm : cm, //表头,即ColumnModel
sm : sm, //选择行,即CheckboxSelectionModel
//视图配置
viewConfig : {
forceFit : true,
enableRowBody : true,
showPreview : false,//是否预览
getRowClass : function(record, rowIndex, p, store) {
//p: 预览内容在页面上的放置的对象,
if (this.showPreview) {
p.body = '<p>' + record.data.descn
+ '[----摘要----]</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
//分页工具栏显示在底部,如果要显示在顶部用tbar(top bar)
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录,共:{2}条',
emptyMsg : "没有记录",
items : ['-', {
pressed : true,
enableToggle : true,
text : '预览',
cls : 'x-btn-text-icon details',
toggleHandler : toggleDetails
}]
})
});
grid.render();
ds.load({
params : {
start : 0,
limit : 10
}
});
function toggleDetails(btn, pressed) {
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
};
}
)
// 为特定行显示值 进行渲染。
function renderName(value) {
return "<a href='xqxq' target='_blank' >" + value + " [----]</a></b>"
}
function renderName2(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value='查看详细信息' onclick='alert(\""
+ "这个单元格的值是:" + value + "\\n" + "这个单元格的配置是:{cellId:"
+ cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css
+ "}\\n" + "这个单元格对应行的record是:" + record + ",一行的数据都在里边\\n" + "这是第"
+ rowIndex + "行\\n" + "这是第" + columnIndex + "列\\n"
+ "这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" + "\")'>";
return str;
}