Ext 与后台老板交互，获取json数据-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20362 次

Ext 与后台交互，获取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);

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>

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

相关资料更多>

推荐阅读更多>

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