Extjs+JSON实例

1.JSON介绍

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。

2.JSON建构于两种结构：

1. “名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。
2. 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

3.简单JSON实例

首先我们创建一个叫做User的简单对象。代码如下：

User.java

public class User{
    private Integer userId;
    private String userName;
    private String password;
    
    public Integer getUserId() {
        return userId;
    }
    public void setUserId(Integer userId) {
        this.userId = userId;
    }
    
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
}

然后我们要位User这个简单对象构建JSON，我们构建的JSON还能统计JSON中User对象个个数，这里我们新建一个TotalJson对象

TotalJson.java

import java.util.List;
public class TotalJson {
    private long results;//数据长度
    private List items;//数据条目
    
    public long getResults() {
        return results;
    }
    public void setResults(long results) {
        this.results = results;
    }
    
    public List getItems() {
        return items;
    }
    public void setItems(List items) {
        this.items = items;
    }
}

最后我们写一个客户端来测试JSON的使用，代码如下

Test2.java

import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONObject;

public class Test2 {
    public static void main(String[] args) {
        // TODO Auto-generated method stub
        List<User> list = new ArrayList<User>();
        //创建用户1
        User user1 = new User();
        user1.setUserId(1);
        user1.setUserName("zhangsan");
        list.add(user1);
        //创建用户2
        User user2 = new User();
        user2.setUserId(2);
        user2.setUserName("lisi");
        list.add(user2);
        //创建JSON对象
        JSONObject JsonOb=getJsonFromList2(list);
        System.out.println("JsonOb:"+JsonOb);
        /**
         * 输出结果：
         * JsonOb:{
         * "items":[
         *         {"password":"","userId":1,"userName":"zhangsan"},
         *         {"password":"","userId":2,"userName":"lisi"}],
         * "results":2}
         */
    }
    
    /**
     * 将List数组转化为JSON数据格式
     * @param beanList 要转化的List数组         
     */
    public static JSONObject getJsonFromList2(List beanList) {
        return getJsonFromList2(beanList.size(), beanList);
    }
    
    /**
     * 将List数组转化为Json数据格式
     * @param recordTotal List数组长度           
     * @param beanList 要转化的List数组    
     */
    public static JSONObject getJsonFromList2(long recordTotal, List beanList) {
        TotalJson total = new TotalJson();
        total.setResults(recordTotal);
        total.setItems(beanList);
        JSONObject JsonObject = JSONObject.fromObject(total);
        return JsonObject;
        //return JsonObject.toString();
    }
}

输出结果：

JsonOb:{"items":[{"password":"","userId":1,"userName":"zhangsan"},{"password":"","userId":2,"userName":"lisi"}],"results":2}

从输出结果我们可以看出，这个JSON中有两条记录，两条记录如下表格所示。

userId	userName	password
1	zhangsan
2	lisi

值得注意的是我们会发现，JsonOb中，items和results字段是在TotalJson对象中定义的，而Items中的password，userId，userName则是在User这个简单对象中定义的。这个就是通过JSONObject.fromObject(total)这个方法来实现的。其中total是TotalJson对象。

4.Extjs+JSON实例

4.1.Extjs前台代码：

var userStore = new Ext.data.Store( {// 定义数据集对象
        proxy : new Ext.data.HttpProxy( {
            url : 'user.do?method=getUserList×tamp=' + new Date()// 设置代理请求的url
        }),
        
//        reader : new Ext.data.XmlReader( {// 创建xml数据解析器
//            totalRecords : "results",
//            record : "UserForm",// 对应的Form,下面的字段名与此Form中的相同,数量可以不同
//            id : "userId"
//        }, Ext.data.Record.create( [ {
//            name : 'userId'
//        }, {
//            name : 'userName'
//        }, {
//            name : 'realName'
//        }, {
//            name : 'roleId'
//        }, {
//            name : 'telephone'
//        }, {
//            name : 'email'
//        }, {
//            name : 'address'
//        }, {
//            name : 'remark'
//        } ]))
        
         reader: new Ext.data.JsonReader({
             totalProperty : 'results',
             root : 'items',
             id: 'userId'
             },
             ['userId','userName','realName','roleId','telephone','email','address','remark'])
    });

    var toolbar = new Ext.Toolbar( [ {// 创建GridPanel的工具栏组件
        text : '新增员工信息',
        iconCls : 'add',
        handler : addUser
    }, {
        text : '删除员工信息',
        iconCls : 'remove',
        handler : deleteUser
    }, {
        text : '修改员工信息',
        iconCls : 'plugin',
        handler : updateUser

    }
    , '-','查询：',' ', new Ext.ux.form.SearchField( {
        store : userStore,
        width : 110
    })

    ]);
    
    var sm = new Ext.grid.CheckboxSelectionModel();// 创建复选择模式对象
    var cm = new Ext.grid.ColumnModel( [// 创建表格列模型
    new Ext.grid.RowNumberer(), sm, {
        header : "编号",
        width : 30,
        dataIndex : 'userId',
        hidden : true,
        sortable : true
    }, {
        header : "用户名",
        width : 60,
        dataIndex : 'userName',
        sortable : true
    }, {
        header : "真实姓名",
        width : 60,
        dataIndex : 'realName',
        sortable : true
    }, {
        header : "用户角色",
        width : 60,
        dataIndex : 'roleId',
        sortable : true
    }, {
        header : "联系电话",
        width : 60,
        dataIndex : 'telephone',
        sortable : true
    }, {
        header : "电子邮箱",
        width : 80,
        dataIndex : 'email',
        sortable : true
    }, {
        header : "住址",
        width : 80,
        dataIndex : 'address',
        sortable : true
    }, {
        header : "备注",
        width : 60,
        dataIndex : 'remark'
    } ]);

    var userGrid = new Ext.grid.GridPanel( {// 创建Grid表格组件
        applyTo : 'user-grid-div',// 设置表格现实位置
        frame : true,// 渲染表格面板
        tbar : toolbar,// 设置顶端工具栏
        stripeRows : true,// 显示斑马线
        autoScroll : true,// 当数据查过表格宽度时，显示滚动条
        store : userStore,// 设置表格对应的数据集
        viewConfig : {// 自动充满表格
            autoFill : true
        },
        sm : sm,// 设置表格复选框
        cm : cm,// 设置表格的列
        bbar : new Ext.PagingToolbar( {
            pageSize : 25,
            store : userStore,
            displayInfo : true,
            displayMsg : '显示第{0}条到{1}条记录,一共{2}条记录',
            emptyMsg : '没有记录'
        //    ,items:['-',new Ext.app.SearchField({store:userStore})]
        })
    });
    userStore.load( {// 加载数据集
        params : {
            start : 0,
            limit : 25
        }
    });

4.2.Java后台代码（解决json 中文乱码）：

    JSONObject JsonOb=ExtHelper.getJsonFromList2(list);//将list装换成JSONObject
    System.out.println("JsonOb:"+JsonOb);//后台输出
//    response.setContentType("text/xml;charset=UTF-8");
    response.setContentType("text/json;charset=UTF-8");//解决前台显示中文乱码问题
    response.getWriter().write(JsonOb.toString());