Ext第二天从后台传JSON数据

最新推荐文章于 2024-07-24 11:38:03 发布

weixin_33916256

最新推荐文章于 2024-07-24 11:38:03 发布

阅读量77

点赞数

文章标签： json python java

原文链接：https://my.oschina.net/u/656749/blog/71664

版权

2019独角兽企业重金招聘Python工程师标准>>>

先要一个容器选择 ComboBox ，其中ComboBox的选项数据可以来自本地(local)，同样也可以从服务器获取数据并填充至选项中。有了容器之后需要以下几个组件：Store用来创建一个类似于数据表的结构，DataProxy负责取到数据，DataReader负责定义记录结构。因为要从远程服务器获取数据，所以应该使用HttpProxy，假设返回的数据类型是JSON格式，因此必须使用JsonReader来解析.

步骤1：建个jsp->

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/js/extjs3.1.1/resources/css/ext-all.css"/>
<title>Insert title here</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/extjs3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/extjs3.1.1/ext-all.js" ></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/extlx/ajaxlx.js"></script>

</head>
<body>

</body>
</html>

步骤2：建个js->

var proxy=new Ext.data.HttpProxy({url:"../xxxServlet"});

var city=Ext.data.Record.create([{name:"cid",type:"int",mapping:"cid"},{name:"cname",type:"string",mapping:"cname"}]);//mapping是逻辑列名与JSON之间建立的映射

var store=new Ext.data.Store({

proxy:proxy,

reader:reader

});

var combo=new Ext.form.ComboBox({

store:store,

emptyText:"请选择城市",

mode:'remote',//远程调用 ,如果是本地使用local

triggerAction:"all",//触发器被点击时执行的操作有两种选择all-->指定的配置项进行查询，query-->使用原始值进行查询

displayField:"cname",//显示值

valueField:"cid",//实际值

renderTo:Ext.getBody()

});

步骤三：远程的servlet

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out=response.getWriter();
        String json="[{cid:1,cname:'长沙市'},{cid:2,cname:'江西省'}]";
        out.println(json);
        out.flush();
        out.close();
    }

实现的效果：

转载于:https://my.oschina.net/u/656749/blog/71664