代码如下:
grid.jsp代码:
   
    <% 
    
    String start=request.getParameter("start");
    String limit=request.getParameter("limit");
    try{
     int index=Integer.parseInt(start);
     int pageSize=Integer.parseInt(limit); 
     String json = "{totalProperty:100,root:[";
     for(int i=index;i<pageSize+index;i++){
     json+="{id:"+i+",name:'name"+i+"',descn:'descn"+i+"',sex:'male'}";
     if(i!=pageSize+index-1){
     json+=",";
     } 
     }
     json+="]}";
     response.getWriter().write(json); 
     System.out.println(json);
     }catch(Exception ex){
     ex.printStackTrace();
     }  
    %>  
table.jsp代码:
<script><!-- 
 Ext.onReady(function(){
  Ext.QuickTips.init();
  Ext.form.Field.prototype.msgTarget='side'; 
  
  
 //判断男女的函数
 function renderSex(value){
   if(value=='male'){
    return "<span style='color:red;font-weight:bold;'>红男</span>"
    }else{
    return "<span style='color:green;font-weight:bold;'>绿女</span>";
    
    } 
 }
 
 //表格单元格相关信息
 function renderDescn(value,cellmeta,record,rowIndex,columnIndex,store){ 
 var str="<input type='button' value='查看详细信息' onclick='alert(\""+
 "这个单元格的值是:"+value+"\\n"+
 "这个单元格的配置是:{cellId:"+cellmeta.cellIsd+",id:"+cellmeta.id+",css:"+cellmeta.css+"}\\n"+
 "这个单元格的对应行的record是:"+record+",一行的数据都在里边\\n"+
 "这是第"+(rowIndex+1)+"行\\n"+
 "这是第"+(columnIndex+1)+"列\\n"+
 "这个表格对应的Ext.data.Store在这里:"+store+",随便用吧。"+
 "\")'>";
 return str;
 
 } 
  
 
var sm=new Ext.grid.CheckboxSelectionModel();
// 定义一个ColumnModel,表头中有四列 
var cm = new Ext.grid.ColumnModel([ 
    new Ext.grid.RowNumberer(),
    sm,
    {header:'编号',dataIndex:'id'}, 
    {header:'名称',dataIndex:'name'},
    {header:'描述',dataIndex:'descn',renderer:renderDescn},
    {header:'性别',dataIndex:'sex',renderer:renderSex}
]);
cm.defaultSortable = true;  // ArrayReader  
 var ds=new Ext.data.Store({
 proxy:new Ext.data.HttpProxy({url:'grid.jsp'}),
 reader:new Ext.data.JsonReader({
 totalProperty:'totalProperty',
 root:'root'
 },[
 {name:'id'},
 {name:'name'},
 {name:'descn'},
 {name:'sex'}
 ])   
}); 
 ds.load({params:{start:0,limit:10}}); 
  
var grid =new Ext.grid.GridPanel({ 
el:'grid',
title:'我的第一个EXT表格',  
cm: cm,
sm: sm,   
ds: ds,
width:550,
height:400, 
bbar: new Ext.PagingToolbar({
      pageSize: 10,
      store: ds,
      displayInfo: true,
      displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
      emptyMsg: "没有记录"
        }),
tbar: new Ext.PagingToolbar({
      pageSize: 10,
      store: ds,
      displayInfo: true,
      displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
      emptyMsg: "没有记录"
        }) 
});  
grid.render(); 
 }); 
      
 </script>
 
 
  
 <body> 
 <table align="center">
 <tr><td> 
 
 <div id="grid" style="height:365px;"></div>
 </td>
 </tr>
 </table>