ext2.2 +jsp+json Grid展示 ，示例1

看到网上有一个php获取后台数据的例子，这里我改写了一下，java获取后台数据，供大家参考：
共涉及3个关键文件，[b]showGrid.js, showGrid.html, showGrid.jsp[/b],

[color=green]下面是具体效果图：[/color]
[img]/upload/attachment/76965/c80190c4-d016-30e6-83fd-1ca8085d4a0a.gif[/img]

[b]1:showGrid.js[/b]

    function ready()
    {

        var url = "showGrid.jsp";
        var sm = new Ext.grid.CheckboxSelectionModel();
        //sm.on("rowselect",function( SelectionModel,rowIndex,record ){debugger;});
        var cm = new Ext.grid.ColumnModel
        ([        
            sm,new Ext.grid.RowNumberer({header:"ID",width:50}),
            {header:"ID",dataIndex:"ID",width:10,hidden:true},
            {header:"TypeCName",dataIndex:"TypeCName",width:100,editor:new Ext.form.TextField()},
            {header:"TypeEName",dataIndex:"TypeEName",width:100,editor:new Ext.form.TextField()},
            {header:"DelFlag",dataIndex:"DelFlag",width:100,renderer:function(value){if(value==false) {return "Display";} else {return "Hide";}}},
            {header:"AddDate",dataIndex:"AddDate",width:100,renderer:Ext.util.Format.dateRenderer('Y-m-d')}
        ]);
        cm.defaultSortable = true; 
        var fields = 
            [
                {name:"ID"},
                {name:"TypeCName"},
                {name:"TypeEName"},
                {name:"DelFlag"},
                {name:"AddDate"}
           ];
        var store = new Ext.data.Store
        ({
            proxy:new Ext.data.HttpProxy({url:url}),
            reader:new Ext.data.JsonReader({totalProperty:"totalProperty",root:"root",id:"ID",fields:fields})
        });

        var pagingBar = new Ext.PagingToolbar
        ({  pageSize:15,
        		store:store,
            displayInfo:true,
            emptyMsg:"no data displayed",
            displayMsg:"Displaying datas {0} - {1} of {2}"          
        });

        var grid = new Ext.grid.GridPanel //Ext.grid.EditorGridPanel
        ({
            id:"MenuGridPanel",            
            renderTo:"divGridPanel",
            layout:"fit",
            frame:true,
            border:true,
            width:600,
            height:450,
            autoScroll:true,  
            store:store,
            sm:sm,
            cm:cm,
            viewConfig:{forceFit: true},
            title:'<img style="height:auto; width:auto;" src="images/first.gif" /> Ext2.2 New Version--ExtJS and Java developped demo',
            clicksToEdit:0,
            loadMask: true,
            tbar:
            [
                {                    
                    text: 'refresh',
                    cls: 'x-btn-text-icon details',icon:"images/plugin.gif",
                    handler: function(btn, pressed)
                    {
                        //event handle is simple, try it youself 
                    }
                }, 
                '-', 
                {                    
                    text: 'add',
                    cls: 'x-btn-text-icon details',icon:"images/plugin.gif",
                    handler: function(btn, pressed)
                    {
                        //event handle is simple, try it youself  
                    }
                }, '-',               
                {                    
                    text: 'edit',
                    cls: 'x-btn-text-icon details',icon:"images/plugin.gif",
                    handler: function(btn, pressed)
                    {                      
                    }
                }, '-',               
                {                    
                    text: 'display/hide',
                    cls: 'x-btn-text-icon details',icon:"images/plugin.gif",
                    handler: function(btn, pressed)
                    {
                        //event handle is simple, try it youself  
                    }
                }, '-',               
                {                    
                    text: 'delete',
                    cls: 'x-btn-text-icon details',icon:"images/plugin.gif",
                    handler: function(btn, pressed)
                    {
                        //event handle is simple, try it youself  
                    }
                },'-',                
                {                    
                    text: 'multi-delete',
                    cls: 'x-btn-text-icon details',icon:"images/plugin.gif",
                    handler: function(btn, pressed)
                    {
                        //event handle is simple, try it youself                             
                    }
                }
            ],
            bbar:pagingBar
        });
        // render it
       grid.render();

       store.load({params:{start:0,limit:15}}); 
    }

[b]2,showGrid.html[/b]

<!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=iso-8859-1">
<title>Paging Grid Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="showGrid.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<script type="text/javascript">
  Ext.onReady(ready);
</script>
<div id="divGridPanel"></div>

</body>
</html>

[b]3,showGrid.jsp[/b]

<%@ page language="java" pageEncoding="UTF-8"%>
<%
  String start = request.getParameter("start");
  String limit = request.getParameter("limit");

  int index = Integer.parseInt(start);
  int pageSize = Integer.parseInt(limit);
  String json = "{totalProperty:25,root:[";
  String sex="";
  for (int i = index; i < pageSize + index; i++) {
    json += "{ID:" + i + ",TypeCName:'Cuba',TypeEName:'China',DelFlag:false,AddDate:'2008/02/"+i+"'}";
    if (i != pageSize + index - 1) {
    json += ",";
    }
  }
  json += "]}";
  response.getWriter().write(json);
  System.out.print(json);
  %>