用户列表展示与管理-优快云博客

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>list users page</title>
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext4/examples/shared/example.css" />
<script type="text/javascript">

Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', 'ext4/examples/ux/');

Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.util.*',
'Ext.ux.data.PagingMemoryProxy',
'Ext.toolbar.Paging',
'Ext.ux.SlidingPager'
]);

Ext.onReady(function(){
// Set up a model to use in our Store
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'userName', type: 'string'},
{name: 'mobil', type: 'string'},
{name: 'email', type: 'string'},
{name: 'address', type: 'string'}
]
});

var myStore = Ext.create('Ext.data.Store', {
model: 'User',
pageSize: 10,
proxy: {
type: 'ajax',
url : 'userAction!list.action',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'user List',
store: myStore,
columns: [
{ header: 'userName', dataIndex: 'userName' },
{ header: 'Mobil', dataIndex: 'mobil' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Address', dataIndex: 'address' }
],
stripeRows: true,
height: 400,
width: 600,
frame:true,
resizable: {
handles: 's'
},
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: myStore,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
})
});

grid.render('grid-example');
})
</script>
</head>

<body>
<div id="grid-example"></div>
</body>
</html>