本人Extjs新手,最近项目要用Extjs做前台交互,想做一个列表,各位高手帮帮忙,怎样用Extjs接受后台数据,具体用哪个组件!谢谢!!!
------解决方案--------------------
这是前台页面表格的写法,不包含分页
- HTML code
<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>学员列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="<%=path%>/ext-3.3.1/resources/css/ext-all.css">
<script type="text/javascript"
src="<%=path%>/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path%>/ext-3.3.1/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var record_start =0;
// 获取数据集方法
var store = new Ext.data.JsonStore({
url: 'common_myData.action',
root: 'results',
totalProperty: 'totalCount',
fields: ['stuno', 'name','sex','age'],
remoteSort: true
});
store.load();//加载数据
//表格每列对应数据集的fields
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({
renderer:function(value,metadata,record,rowIndex){
return record_start + 1 + rowIndex;
}
}),{
header: "学号",
dataIndex: 'stuno',
sortable: true,
width: 150
},{
header: "姓名",
dataIndex: 'name',
width:80
},{
header: "性别",
dataIndex: 'sex',
width: 80
},{
header: "年龄",
dataIndex: 'age',
sortable: true,
align :'right',
width:50
}
]);
//构建表格列表
var grid = new Ext.grid.GridPanel({
bodyStyle:'width:100%',
autoWidth:true,
height:518,
store: store,
cm: cm,
title:'学员列表',
loadMask: true,
renderTo:'studentsDiv',//对应body里的div的ID
tools:[{
id:'close',
handler:function(event, toolEl, panel){
grid.destroy();
}
}]
});
});
</script>
</head>
<body>
<div id="studentsDiv"></div>
</body>
</html>