Ext.data.JsonReader读取json数据

Ext.data.JsonReader读取json数据
一、不传URL
view plaincopy to clipboardprint?
var myData={ "Head":[
    { "UserName":"admin","Name":"李亚斌","Gender":"M","Password":"123456","Status":"0","Department":"技术部","Title":"程序员","Email":" 0:00:00","ModifyUser":"1","ModifyTime":"2009-10-30 10:04:22"},
    { "UserName":"00001","Name":"李香兰","Gender":"F","Password":"123456","Status":"0","Department":"技术部","Title":"程序员","Email":" 0:00:00","ModifyUser":"","ModifyTime":""}
    ]
}

var ds = new Ext.data.Store({
    //proxy: new Ext.data.MemoryProxy(myData),
    reader: new Ext.data.JsonReader({root: 'Head'},
    [{name:'UserName'},{name: 'Name'}, {name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}])
});
ds.loadData(myData)

或者

var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(myData),
    reader: new Ext.data.JsonReader({root: 'Head'},
    [{name:'UserName'},{name: 'Name'}, {name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}])
});
//注意下面这句 切记
ds.load()都可以
var myData={ "Head":[
    { "UserName":"admin","Name":"李亚斌","Gender":"M","Password":"123456","Status":"0","Department":"技术部","Title":"程序员","Email":" 0:00:00","ModifyUser":"1","ModifyTime":"2009-10-30 10:04:22"},
    { "UserName":"00001","Name":"李香兰","Gender":"F","Password":"123456","Status":"0","Department":"技术部","Title":"程序员","Email":" 0:00:00","ModifyUser":"","ModifyTime":""}
    ]
}
var ds = new Ext.data.Store({
    //proxy: new Ext.data.MemoryProxy(myData),
    reader: new Ext.data.JsonReader({root: 'Head'},
    [{name:'UserName'},{name: 'Name'}, {name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}])
});
ds.loadData(myData)
或者
var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(myData),
    reader: new Ext.data.JsonReader({root: 'Head'},
    [{name:'UserName'},{name: 'Name'}, {name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}])
});
//注意下面这句 切记
ds.load()都可以
二、使用URL
(1)JSON HTMLPage.htm页面做数据源
view plaincopy to clipboardprint?
{"Head":[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]}
{"Head":[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]}
相应的ext代码
view plaincopy to clipboardprint?
Ext.onReady(function(){
    
    var proxy=new Ext.data.HttpProxy({url:'HTMLPage.htm'});
    //定义reader
    var reader=new Ext.data.JsonReader({ root:'Head' },
    [
    {name: 'appeId', mapping: 'appeId'},
    {name: 'survId'},
    {name: 'location'},
    {name: 'surveyDate'},
    {name: 'surveyTime'},
    {name: 'inputUserId'}
    ]
    )
    //构建Store
    var store=new Ext.data.Store(    {
        proxy:proxy,
        reader:reader
    });
    //载入
    store.load();
    
    
    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
        {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
        {header: "survId", width: 60, dataIndex: 'survId', sortable: true},
        {header: "location", width: 60, dataIndex: 'location', sortable: true},
        {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
        {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
        {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
        ],
        renderTo:'example-grid',
        width:540,
        height:200
    });
    
    
    Ext.onReady(function(){
        
        var proxy=new Ext.data.HttpProxy({url:'HTMLPage.htm'});
        //定义reader
        var reader=new Ext.data.JsonReader({ root:'Head' },
        [
        {name: 'appeId', mapping: 'appeId'},
        {name: 'survId'},
        {name: 'location'},
        {name: 'surveyDate'},
        {name: 'surveyTime'},
        {name: 'inputUserId'}
        ]
        )
        //构建Store
        var store=new Ext.data.Store(    {
            proxy:proxy,
            reader:reader
        });
        //载入
        store.load();
        
        
        // create the grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
            {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
            {header: "survId", width: 60, dataIndex: 'survId', sortable: true},
            {header: "location", width: 60, dataIndex: 'location', sortable: true},
            {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
            {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
            {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
            ],
            renderTo:'example-grid',
            width:540,
            height:200
        });
        
    });
    (2).如果json 数据中 没有数据标题"Head“只需要把reader改成 如下即可：其他不需要改变
    view plaincopy to clipboardprint?
    //定义reader
    var reader=new Ext.data.JsonReader({},
    [
    {name: 'appeId', mapping: 'appeId'},
    {name: 'survId'},
    {name: 'location'},
    {name: 'surveyDate'},
    {name: 'surveyTime'},
    {name: 'inputUserId'}
    ]
    )
    //定义reader
    var reader=new Ext.data.JsonReader({},
    [
    {name: 'appeId', mapping: 'appeId'},
    {name: 'survId'},
    {name: 'location'},
    {name: 'surveyDate'},
    {name: 'surveyTime'},
    {name: 'inputUserId'}
    ]
    )
    经验小技巧：传data 的URL文件可为，html,aspx.js等，文件引用的js永远和 文件在同一路径。
    另外主要注意一下 HttpProxy 和MemoryProxy的区别，细心的读者可以看到 以上两种方法 使用的proxy使用的不同
    MemoryProxy
    MemoryProxy只能从JavaScript对象获得数据，可以直接把数组，或JSON和XML格式的数据交给它处理，如下面的代码所示。
    var proxy = new Ext.data.MemoryProxy([
    ['id1','name1','descn1'],
    ['id2','name2','descn2']
    ]);
    HttpProxy
    HttpProxy使用HTTP协议，通过Ajax去后台取数据，构造它时需要设置url:'xxx.jsp'参数。这里的url可以替换成任何一个合法的网址，这样HttpProxy才知道去哪里获取数据，如下面的代码所示。
    var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});
    后台需要返回EXT所需要的JSON格式的数据，下面的内容就是后台使用JSP的一个范例，如下面的代码所示。
    response.setContentType("application/x-json");
    Writer out = response.getWriter();
    out.print("[" +
    "['id1','name1','descn1']" +
    "['id2','name2','descn2']" +
    "]");
    请注意，这里的HttpProxy不支持跨域，它只能从同一域中获得数据。如果想跨域，请参考下面的ScriptTagProxy。
    ScriptTagProxy
    ScriptTagProxy的用法几乎和HttpProxy一样，如下面的代码所示。
    var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});
    从这里也看不出来它是如何支持跨域的，我们还需要在后台进行相应的处理，如下面的代码所示
    String cb = request.getParameter("callback");
    response.setContentType("text/javascript");
    Writer out = response.getWriter();
    out.write(cb + "(");
    out.print("[" +
    "['id1','name1','descn1']" +
    "['id2','name2','descn2']" +
    "]");
    out.write(");");
    其 中的关键就在于从请求中获得的callback参数，这个参数叫做回调函数。ScriptTag- Proxy会在当前的HTML页面里添加一个<script type="text/javascript"src="/xxx.jsp"> </script>标签，然后把后台返回的内容添加到这个标签中，这样就可以解决跨域访问数据的问题。为了让后台返回的内容可以在动态生成的 标签中运行，EXT会生成一个名为callback的回调函数，并把回调函数的名称传递给后台，由后台生成callback(data)形式的响应内容， 然后返回给前台自动运行。