EXT2.0: GridPanel 分页方法绝好例子

wayfoon · 发表于 2013-2-7 23:38:21

EXT2.0: GridPanel 分页方法绝好例子
将代码保持成html文件，放在ext 包路径下面，直接打开即可，看到效果

<div class="highlighter">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<LINK href="ext2.0/resources/css/ext-all.css" type=text/css rel=stylesheet>
<SCRIPT src="ext2.0/adapter/ext/ext-base.js" type=text/javascript></SCRIPT>
<SCRIPT src="ext2.0/ext-all.js" type=text/javascript></SCRIPT>
<SCRIPT>
Ext.onReady(function(){
//自定义列,可以更改显示内容，比如常用到的 0：男 1：女 <span />
function check(value)
{
if (value=='195154')
{
return '<span style="color:red;font-weight:bold;">内容已更改</span>';
}
else
{
return value;
}
}
//跨域读取数据使用 ScriptTagProxy url=http://extjs.com/forum/topics-remote.php <span />
//可以直接访问 http://extjs.com/forum/topics-remote.php 查看json 数据形式 <span />
var store = new Ext.data.Store({
proxy : new Ext.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'post_id'
},[
'post_id','topic_title','author'
])
});
store.load({params:{start:0, limit:10}});
//定义勾选框，不需要可不必定义 <span />
var sm = new Ext.grid.CheckboxSelectionModel();
//定义列 <span />
var colM=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义 <span />
sm,//勾选框，不需要可不必定义 <span />
{header:'列1',dataIndex:'post_id',width:170,sortable:true,renderer:check},
// 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数 <span />
{header:'列2',dataIndex:'topic_title',width:170,sortable:true},
{header:'列3',dataIndex:'author',width:170}
]);
//生成表格 <span />
var grid = new Ext.grid.GridPanel({
renderTo:'show',
title:"表格",
height:400,
width:600,
cm:colM,
sm:sm,
store:store,
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据共{2}条',
emptyMsg: "没有数据"
})
});
});
</SCRIPT>
<DIV id=show></DIV>
</body>
</html>

		自动登录	找回密码
密码			立即注册