一个简单的ext分页例子

学习ext也有一段时间了，明白只有不断的总结，才能让自己进步的更快，遂写此文，权当积累经验~呵呵 

ext首先需要导入的三个东西：

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

　注：我的ext是2.0版本的。(这里有段小插曲，在link一列，如果你有某个单词写错的话，那么你的ext hellowrld例子就可能只有文字，没有样式了！另外一个需要注意的地方就是在引入ext-all.css的时候，最好吧整个resource目录都copy过来，因为我碰到一个问题就是如果说只有一个ext-all.css文件的话，那么你在页面上想要显示一个复选框之类的东西是显示不出来的，而且分页的按钮的图片也不会显示出来。)

<script type="text/javascript">
    Ext.onReady(function(){

　　　　//列模型 , 即column model
        var cm = new Ext.grid.ColumnModel([{header:'编号',dataIndex:'id'},
                                           {header:'名称',dataIndex:'name'},
                                           {header:'描述',dataIndex:'descn'}]);

　　　　　//数据源
        var ds = new Ext.data.Store({
            proxy:new Ext.data.HttpProxy({url:'data.jsp'}),
            reader:new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},[{name:'id'},
                                                                                        {name:'name'},
                                                                                        {name:'descn'}
                                              ]),
        });

　　　　　　//初始化加载数据
        ds.load({params:{start:0,limit:10}});
        var grid = new Ext.grid.GridPanel({
            el:'grid',//在body里要有个<div id="grid" style="height:270px;"></div>的东西，主要就是为了让系统知道表格显示的位置，后面的style属性主要是分页显示数据的时候所占的高度  
            ds:ds,
            cm:cm,            
            bbar:new Ext.PagingToolbar({    //分页工具条
                pageSize:10,
                store:ds,
                displayInfo:true,
                displayMsg:'显示第{0}条到第{1}条记录，一共{2}条',
                emptyMsg:'没有记录'
            })
        });
        grid.render();//渲染
    });
</script>

　　前面说的都是前台的代码，下面把后台代码贴上：（即data.jsp）

<%
    int index = new Integer(request.getParameter("start") == null ? "0": request.getParameter("start"));  
    System.out.println("index="+index);
    int pageSize = Integer.parseInt(request.getParameter("limit")==null?"10":request.getParameter("limit"));
    System.out.println("pageSize="+pageSize);
    String json = "{totalProperty:100,root:[";
    for(int i=index;i<pageSize+index;i++)
    {
        json+="{id:"+i+",name:"+"'"+i+"'"+",descn:"+"'"+i+"'"+"}";    
        if(i != pageSize+index-1){
            json+=",";
        }
    }
    json+="]}";
    response.getWriter().write(json);
    System.out.println(json);
%>

注：这里不需要用html标签，因为如果有html的标签的时候，返回的东西就不能被前台的jsonreader正确解析，后台的数据格式必须是这样：

{totalProperty:100,root:[{id:0,name:'name',descn:'descn'},{id:1,name:'name1',descn:'descn1'},{id:2,name:'name2',descn:'descn2'}}

　做到这一步，一个ext分页的例子就完成了~呵呵，下面是页面截图：

　参考资料：ext入门到精通....