Ext 与后台交互，获取json数据

ExtJS 数据网格实现

最新推荐文章于 2021-01-17 13:14:29 发布

mengshuangcom

最新推荐文章于 2021-01-17 13:14:29 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏： extjs 文章标签： EXT json CSS JSP JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/mengshuangcom/article/details/83918446

extjs 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用ExtJS创建一个包含分页、排序和选择功能的数据网格。通过编写grid3.jsp页面和grid3.js脚本文件，实现了从gridjson.jsp获取JSON格式数据，并展示在一个动态加载的表格中。

一、首先增加一个jsp页面grid3.jsp

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Grid3</title>
<link rel="stylesheet" type="text/css" href="../extJs/resources/css/ext-all.css" />

<script type="text/javascript" src="../extJs/adapter/ext/ext-base.js"></script>

</html>

二、增加一个js grid3.js

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
    Ext.QuickTips.init();
    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'},
        {header:'描述',dataIndex:'descn'},
        {header:'其他',dataIndex:'other'}
    ]);

    //proxy直接去读取josn数据
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'gridjson.jsp'}),//提交的页面
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root',
            successProperty :'success'
        }, [
            {name: 'id',mapping:'id',type:'int'},
            {name: 'name',mapping:'name',type:'string'},
            {name: 'descn',mapping:'descn',type:'string'},
            {name: 'other',mapping:'other',type:'string'}
        ])
    });

    //设置分页
    var grid = new Ext.grid.GridPanel({
        el: 'grid3', //页面对应的层ID
        ds: ds,
        sm: sm,
        cm: cm,
        width:700,
        height:280,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        })
    });
    //el:指定html元素用于显示grid
    grid.render();//渲染表格
    ds.load({params:{start:0, limit:10}});
});

三、因为grid3.js里的数据是通过 url:'gridjson.jsp'来读取的（实例用jsp比较方便），所以新建一个gridjson.jsp来产生json格式的数据

<%
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 + "',other:'other"+i+"'}";
        if (i != pageSize + index - 1) {
            json += ",";
        }
    }
    json += "]}";
    response.getWriter().write(json);
} catch(Exception ex) {
}
%>