EXT 3.0
前端代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>Paging Grid Example</title>
<link rel="stylesheet" type="text/css" href="/jbpm/js/ext/resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="/jbpm/js/ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="/jbpm/js/ext/ext-all.js"></script>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.JsonStore({
root: 'data',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields:['surl','sviewappname','simage','role','pos','universalid','sname','universalid'],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: '/jbpm/PagingTest.do'
})
});
var grid = new Ext.grid.GridPanel({
width:'700',
height:500,
title:'列表',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
// grid columns
columns:[{header:'连接new',dataIndex:'surl',width:100,sortable:false}
,{header:'视图',dataIndex:'sviewappname',width:100,sortable:false}
,{header:'图标',dataIndex:'simage',width:100,sortable:false}
,{header:'角色',dataIndex:'role',width:100,sortable:false}
,{header:'位置',dataIndex:'pos',width:100,sortable:false}
,{header:'序号',dataIndex:'universalid',width:100,sortable:false}
,{header:'名称',dataIndex:'sname',width:100,sortable:false}
,{header:'操作',dataIndex:'universalid',width:100,renderer:renderCommand,sortable:false}
],
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
beforePageText:"当前第",
afterPageText:"页，共{0}页",
lastText:"尾页",
nextText :"下一页",
prevText :"上一页",
firstText :"首页",
refreshText:"刷新页面",
displayInfo: true,
displayMsg:"当前显示 {0} - {1}条, 共 {2}",
emptyMsg: "没有记录"
})
});
// render it
grid.render('grid');
// trigger the data store load
store.load({params:{start:0, limit:20}});
});
</script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
</head>
<body>
<div id="grid"></div>
</body>
</html>
后台代码,使用F1JEE框架,在此省略