Extjs4.2与SSH框架传输json数据小例

最新推荐文章于 2019-11-19 15:32:07 发布

浅笑黄花伊人泪

最新推荐文章于 2019-11-19 15:32:07 发布

阅读量1.2k

点赞数

分类专栏： Extjs4 文章标签： extjs4 ssh 数据交互 json 数据库

本文链接：https://blog.csdn.net/a550246215/article/details/22074333

版权

Extjs4 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近刚刚接收extjs由于4.0以后的版本与之前有较大不同，图书馆的书不是很多，就照着仅有的基本看了下，然后将自己的饭店预定管理的登录和房间列表做了下数据交互，

我只写下重点，ext与后台交互主要是在store里面配置好url fields 和reader，由于我用的是struts， url就是action名字，extjs是支持json的，所以将数据库取出的列表放到json map里面返回到前台下面是代码

hibernate 和spring就不贴了 struts核心代码如下：

public String execute()
	{
		List<Room> roomlist=roomService.findAllRoom();
		ServletActionContext.getRequest().setAttribute("roomlist", roomlist);
		
		System.out.println("查找完毕");
		this.setTotalCount(roomlist.size());
		JSONArray array=JSONArray.fromObject(roomlist);
	/*	this.jsonString="{totalCount:"+this.getTotalCount()+",results:"+array.toString()+"}";*/
	/*	return SUCCESS;*/
		
		System.out.println("转换完毕");
	/*	System.out.println(jsonString);
		System.out.println(array);*/

		Map<String, Object> map = new HashMap<String, Object>();
		/*List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();*/
		/*list=roomlist;*/
		
		/*for(int i=0;i<3;i++){
			Map<String, Object> m = new HashMap<String, Object>();
			m.put("id", i);
			m.put("name", "Mic"+i);
			list.add(m);
		}*/
		map.put("results", array);
		map.put("totalCont", this.getTotalCount());
		this.setResponseJson(map);
		System.out.println(this.getResponseJson());
		
	/*	Map<String , Object> result = new HashMap<>();
		result.put("success" , true);
		// 调用业务逻辑组件的方法，获取数据，并设置成data属性
		result.put("data" , new RoomService.findAllRoom());
		// 准备输出服务器响应
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		// 将Map包装成JSONObject后输出
		out.print(new JSONObject(result));*/
	/*	this.setJsonString(jsonString);*/
		
		
		return SUCCESS;
		
		
	}

struts.xml：

  </package>
    <package name="json" extends="json-default" namespace="/">
    
    		<action name="listRoom" class="ListRoom">
          <result name="success"  type="json">
             <param name="root">responseJson</param> 
         </result>
            
       </action>
    	
    </package>

jsp页面（好像是有一种方法通过jsp页面传值，具体我没试出来，好像这种方法不是太好吧我贴2个微博地址大家去学习下把：1、 http://www.blogjava.net/fuhoujun/archive/2008/10/02/232050.html

2、http://czpae86.iteye.com/blog/632747）

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
 <%@ taglib prefix="s" uri="/struts-tags" %>   
 <%--    <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%> --%>
<s:property value="jsonString" escape="false" />
<!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=GB18030">
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="ext/ext-all.js"></script>
<%-- <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script> --%>
<script type="text/javascript" src="listroom.js"></script>
<title>ext表单</title>

JS代码：

Ext.onReady(function () {
    /*Ext.define('Room',
	{
		extend:'Ext.data.Model',
		fields:[{
			name:'roomid',type:'int'
		},
		{
			name:'roomname',type:'string'
		},
		{
			name:'price',type:'int'
		},
		{
			name:'category',type:'string'
		},
		{name:'status',type:'int'}]
	});*/
    /*	 var rd = new Ext.data.JsonReader({
                //总记录数
                totalProperty: 'totalCount', 
                //哪儿是数据的头，可以看action里面是怎么定义数据格式的，这里就是如何解析的           
                    root: 'results', 
                    id:'roomid',
                //有那些字段呢？
                fields:[
                         {name:'roomid'},
                         {name:'roomname'},
                         {name:'price'},
                         {name:'category'},
                         {name:'status'},
                            //这里就是对room对象进行映射的地方                        
                         {name:'roomid' ,mapping:'Room.roomid',type:'int'},
                         {name:'roomname',mapping:'Room.roomname',type:'string'},
                         {name:'price',mapping:'Room.price',type:'int'},
						{name:'category',mapping:'Room.category',type:'string'},
						{name:'status',mapping:'Room.status',type:'int'}
                         ]
                                     });*/
	/*var results = eval_r('('+jsonString+')');
	var totalCount = eval_r('('+jsonString+')');*/
	
/*	var results = eval_r('('+root+')');
	var totalCount = eval_r('('+root+')');*/
	/*var data_1=*/
	/*var roomstore = Ext.create('Ext.data.Store', {
        model:"Room",
    	
            fields: [
            
            	'category',
            	'price',
                'roomid',
                'roomname',
                'status'
            ],
        pagesize: 2,
        proxy: {
            type: 'ajax',
            url: 'listRoom2.action',
            method: 'POST',
            reader: {
            	
                type: 'json',
                root: 'results',
               
                
                totalProperty:'totalCount'
                [
                 {
                    name: 'category',
                    mapping: 'category'
                },
                {
                    name: 'price',
                    mapping: 'price'
                },
                {
                    name: 'rooid',
                    mapping: 'roomid'
                },
                {
                    name: 'roomname',
                    mapping: 'roomname'
                },  {
                    name: 'status',
                    mapping: 'status'
                }
                ]
            }
             }});*/
            /*new Ext.data.JsonReader( {
		totalProperty:totalCount,
		root:results,
		id:'roomid'
		},
		[
		{name:'rooid',mapping:'roomid'},
		{name:'roomname',mapping:'roomname'},
		{name:'price',mapping:'price'},
		{name:'category',mapping:'category'},
		{name:'status',mapping:'status'}
		])*/
        /*data:{totalCount:5,results:[{"category":"单人","price":988,"roomid":1,"roomname":"房间1","status":1},{"category":"双人","price":998,"roomid":2,"roomname":"房间2","status":1},{"category":"多人","price":9999,"roomid":3,"roomname":"总统套房","status":0},{"category":"单人","price":50,"roomid":4,"roomname":"屌丝专用","status":1},{"category":"标间","price":111,"roomid":5,"roomname":"飞机场","status":1}]}
		*/
        /*autoLoad:true*/
var roomstore = Ext.create('Ext.data.Store', {
     fields: [
            
            	'category',
            	'price',
                'roomid',
                'roomname',
                'status'
            ],
     proxy: {
         type: 'ajax',
         url: 'listRoom.action',
         reader: {
             type: 'json',
             root: 'results',
             totalproperty:'totalCount',
             id:'roomid'
         }
     },
     autoLoad: true
 });
	
   
  
  /*  roomstore.load();*/
    Ext.create('Ext.grid.Panel', {
        title: '房间信息',
        store: roomstore,
        columns: [
        
        	{
                header: '房间类型',
                dataIndex: 'category'
            },
            {
                header: '价格',
                dataIndex: 'price'
            },
            {
                header: '房间号',
                dataIndex: 'roomid'
            },
            {
                header: '房间名',
                dataIndex: 'roomname'
            },
            {
                header: '房间状态',
                dataIndex: 'status',
                renderer: function (value) {
                    if (value == '1') {
                        return '满';
                    } 
                    else
                    return '空闲';
                }
            }
        ],
        width: 600,
        autoHeight:true,
        /*loadMask: {
            msg: '数据加载中...'
        },*/
      /*  bbar: {
            xtype: 'pagingtoolbar',
            store: roomstore,
            displayInfo: true
        },*/
        renderTo: Ext.getBody()
    });
});

最后运行的效果：

浅笑黄花伊人泪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Extjs4.2与SSH框架传输json数据小例

最近刚刚接收extjs由于4.0以后的版本与之前有较大不同，图书馆的书不是很多，就照着仅有的基本看了下，然后将自己的饭店预定管理的登录和房间列表做了下数据交互，我只写下重点，ext与后台交互主要是在store里面配置好url fields 和reader，由于我用的是struts， url就是action名字，extjs是支持json的，所以将数据库取出的列表放到json map里面返回
复制链接

扫一扫