<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html>
? <head>
??? <html:base />
???
?? <title>頁分</title>
<link rel="stylesheet" type="text/css" href="../CSS/ext-all.css" />
?
?<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">
?
???
??? <script type="text/javascript" src="../JS/ext-base.js"></script>
??<script type="text/javascript" src="../JS/ext-all.js"></script>
? </head>
?
? <body>
?? <script>
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
??? new Ext.grid.RowNumberer(),
??? sm,
??????? {header:'編號',dataIndex:'id',sortable:true},
??????? {header:'名稱',dataIndex:'name',sortable:true},
??????? {header:'性別',dataIndex:'sex',sortable:true,renderer:function(value){
??????? if(value=='male'){
????????? return " <span style='color:red;font-weight:bold;'>紅男 </span> ";
??????? }else{
????????? return " <span style='color:green;font-weight:bold;'>綠女 </span>";
??????? }
??????? }},
??????? {header:'描述',dataIndex:'descn',sortable:true}
??? ]);
??? cm.defaultSortable = true;
?var ds = new Ext.data.Store({
??????? proxy: new Ext.data.HttpProxy({url:'../test.do'}),
??????? reader: new Ext.data.JsonReader({
??????????????? totalProperty: 'totalProperty',
??????????????? root: 'root'
??? },
??? [
??????? {name: 'id',mapping:'id'},
??????? {name: 'name',mapping:'name'},
??????? {name:'sex',mapping:'sex'},
??????? {name: 'descn',mapping:'descn'}
??? ]),
??? remoteSort:true
???
??? });
??????
??? var grid = new Ext.grid.GridPanel({
??? el: 'grid',
??? title:'Ext Grid Test',
??? width:450,
??? height:410,
??? trackMouseOver:false,
?? loadMask: {msg:'正在加載數據，請稍侯……'},
??? store:ds,
??? cm: cm,
??? sm:sm,
??? bbar: new Ext.PagingToolbar({
??????????? pageSize: 5,
??????????? store: ds,
??????????? displayInfo: true,
??????????? displayMsg: '當前顯示 {0} - {1}條記錄 /共 {2}條記錄',
??????????? emptyMsg: "No topics to display"
??????? })
});
?
??? grid.render();
???
??? ds.load({params:{start:0, limit:5}});
???
});
</script>
<div id="grid"></div>?
<br>
Hello,Welcome to Here!
? </body>
</html:html>
下面是action
public ActionForward execute(ActionMapping mapping, ActionForm form,
???HttpServletRequest request, HttpServletResponse response) {
??// TODO Auto-generated method stub
?? String start = request.getParameter("start");
??? String limit = request.getParameter("limit");
??? int index = Integer.parseInt(start);
??? int pageSize = Integer.parseInt(limit);
??? String json = "{totalProperty:100,root:[";
??? String sex="";
??? for (int i = index; i < pageSize + index; i++) {
??? if(i%2==0)
??? {
???? sex="male";
??? }
??? else{
???? sex="female";
??? }
????? json += "{id:" + i + ",name:'" + i + "',sex:'"+sex+"',descn:'descn" + i
????? + "'}";
????? if (i != pageSize + index - 1) {
????? json += ",";
????? }
??? }
??? json += "]}";
??? try {
???response.getWriter().write(json);
??} catch (IOException e) {
???// TODO Auto-generated catch block
???e.printStackTrace();
??}
??? System.out.println("獲取數據：?? "+start+"----"+limit);
??return null;
?}
///
注意就是在做的時候一定要把image包引用進來啊.
好了今天就說到這里,最近比較忙,過幾天我們繼續分享.
如果有朋友想和我一起研究的話,請聯系我:
QQ群:10239526