Extjs3.0 从服务器端向客户端通过JSON方式传递数据(四)

5 建立extjs页面

Ext.onReady(function(){         var _window = new Ext.Window({        width:100,        height:50,        title:"welcome",        buttons:[{            text:"click",            //对于点击事件进行处理            handler:function(){               //通过这个请求最终拿到字符串               Ext.Ajax.request({                     url:"http://localhost:8080/ext_bbs/abc/showmessage",                     success: function(response,option) {                        //拿到全部的文本，包括对于展示没有用"success":true 这个值                        var _string = response.responseText;                        //将文本转化为JSON                         var _json = Ext.decode(_string);                         //拿到对象中用来输出表格的那部分对象数组                         //"arrayjson"：{},{},{} 里边存放的就是对象的数组,看不明白就alert()一下吧，嘻嘻...                         var temp = _json.arrayjson;                         //然后再把对象转化成为字符串                         var _str = Ext.encode(temp);                         //拼接字符串                        var _string = "{'action':true,'message':'error!','data':"+_str +",'columModle':["+                            " {'header': 'id','dataIndex': 'id','width':40},"+                            " {'header': 'title','dataIndex': 'title'},"+                            " {'header': 'content','dataIndex': 'content'}"+                            "  ],'fieldsNames':[{name: 'id'},"+                            " {name: 'title'}, {name: 'content'}]}";                                                       //test                          alert(_string);                        //将字符串转换为json类型                          var json = Ext.util.JSON.decode(_string);                       //设置一下表格需要用到的变量                       var cm = new Ext.grid.ColumnModel(json.columModle);                       var ds = new Ext.data.JsonStore({                       data:json.data,                           fields:json.fieldsNames                        });                        //new一个表格                      var grid = new Ext.grid.GridPanel({                          region: 'center',                           split: true,                           border:false,                           cm:cm,                           ds:ds,                           height:300                       });                         grid.render(document.body);                     }                });            }        }]     });     _window.show(); });