用Extjs实现分页自动加载数据的Ajax实现

最新推荐文章于 2020-12-24 14:38:55 发布

yangzhijun_cau

最新推荐文章于 2020-12-24 14:38:55 发布

阅读量3.1k

点赞数

文章标签： extjs ajax header stylesheet function exception

用Extjs实现分页自动加载数据的Ajax实现

2008-04-23 19:20

需要用到的外部js文件为prototype.js，和extjs官方的ext-base.js，ext-all.js，ext-lang-zh_CN.js和resources整个文件夹。所有文件都放在同一个目录下。

－－－－－－－－－－－－－－－－－－－－－－

array-grid-page.html

－－－－－－－－－－－－－－－－－－－－－－

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Array Grid Example</title>

     ds.load();

     TimeoutHandler = setTimeout ("seturl()", 1000);
}

</script>
</body>
</html>

－－－－－－－－－－－－－－－－－－－－－－

array-grid-page.js

－－－－－－－－－－－－－－－－－－－－－－

var sm = null;
var cm = null;
var ds = null;
var grid = null;
var data = null;
var isReady = false;

Ext.onReady(function(){

    sm = new Ext.grid.CheckboxSelectionModel();
    cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'编号',dataIndex:'id',width: 100},
        {header:'性别',dataIndex:'sex',width: 100,renderer:renderSex},
        {header:'名称',dataIndex:'name',width: 140},
        {header:'描述',dataIndex:'descn',width: 190}
    ]);
    cm.defaultSortable = true;
    ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.jsp'}),
        reader: new Ext.data.JsonReader({
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

    ds.load();

    grid = new Ext.grid.GridPanel({
        el: 'grid3',
        ds: ds,
        cm: cm,
        stripeRows: true,
        sm: sm,
        title: 'JSP->JSON',
        tbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }),
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }),

        height:500,
        autoWidth: true,
        width:600
        //autoHeight: true,
        //没有设置高度的时候一定要设置autoHeight: true，否则数据显示不出来
        //autoWidth: true,
    });
    grid.render();
    grid.getSelectionModel().selectFirstRow();
    isReady = true;

})

－－－－－－－－－－－－－－－－－－－－

data.jsp

－－－－－－－－－－－－－－－－－－－－

<%@ page contentType="text/xml; charset=gbk" language="java" errorPage="" %>
<%@ page language="java" import="java.io.PrintWriter"%>
<%
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("gbk");
PrintWriter xmlout = response.getWriter();
int start = 0;
int limit = 20;
StringBuffer sb = new StringBuffer();

sb.append("{root:[");

for (int i=start;i<limit;i++)
{
   sb.append("{'id':'");
   sb.append(i);
   sb.append("','sex':'");

   if(Math.floor(Math.random() * 100)>50){
    sb.append("男");
   }
   else
   {
    sb.append("女");
   }
   sb.append("','name':'姓名 ");
   sb.append(Math.floor(Math.random() * 100));
   sb.append("','descn':'描述 ");
   sb.append(Math.floor(Math.random() * 100));
   sb.append("'}");
   if(i!=limit-1)
   {
    sb.append(",");
   }
   else
   {
    sb.append("]}");
   }
}

String rs = sb.toString();
System.out.println(rs);

try
{
   xmlout.write(rs);
}
catch (Exception e)
{
   e.printStackTrace();
}
finally
{
   xmlout.flush();
   xmlout.close();
}
%>

yangzhijun_cau

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
用Extjs实现分页自动加载数据的Ajax实现

用Extjs实现分页自动加载数据的Ajax实现2008-04-23 19:20需要用到的外部js文件为prototype.js，和extjs官方的ext-base.js，ext-all.js，ext-lang-zh_CN.js和resources整个文件夹。所有文件都放在同一个目录下。－－－－－－－－－－－－－－－－－－－－－－array-grid-pag
复制链接

扫一扫