?在学习Ext 数据之前我来来学习一下JSON 的使用和数据对象格式的写法
?
1.Json 介绍
?
????? 虽然XML已在不少应用程序中大显身手,但它并不是十全十美的,特别是遇到AJAX应用的时候,XMLHttpRequest会检查返回数据的MIME类型,如果是text/xml类型,XMLHttpRequest就会运行XML Parser来解析返回的文档,并在内存中构建出对应的DOM树,之后,你可以用JavaScript标准的DOM方法来操作DOM树。由于众所周知 DOM的诟病,这显然不是有效率的方法。另外一个问题是,如果你想使用JavaScript对象而不是直接用XML数据的话,你还得自己遍历整个DOM树来创建相应对象。
???? 于是JSON出现在我们面前。
????? JSON提供了一种更适合AJAX应用的标准数据交换格式。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。
?
2. Json 的使用介绍(Json 表示对象的方式)
?
?? 2.1 对象表示原理
?? Json 提供了两种结构:
????????????? 1) 名/值对,其格式如下 {"名":"值", ...} 如:{"fullname": "Sean Kelly"},你可以把它理解为对象,或者哈希表,字典等等。
?
//如在Java 中有一对象 public class User{ private Integer id; private String name; private String sex; private Collection<Score> scores; .....setter...getter... } public class Score { private Integer id; //Lession Name private String lessionId; private float fraction; .....setter...getter... }
? ? 表示成Json 对象为
?
var user = { "id" :10, "name" : "liuqing", "sex" : "male", "scores" : [ {"id":1030,"english":"100000002","fraction":"125.5"}, {"id":1030,"math":"100000002","fraction":"135"}, {"id":1030,"chineses":"100000002","fraction":"149"}, ] }
?? 可以通过user.id user.name来得到对象的值
??? 2) 数组,它是值的有序列表。一个数组以“[”开始,“]”结束。值之间使用“,”分隔。
????????????? 3) Json的值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。
??? 2.2 Java 与Json 的操作 实战
?
?
?
?? 3. 让我们来进入Ext 吧
?
Ext.onReady( function (){ //配置JSON数据 var myData = { records:[ { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"}, { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"}, { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"}, { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"}, { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"}, { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"}, { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"}, { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"}, { name:"record1",column:"1",column2:"2" }, { name:"record2",column:"2",column2:"5555"} ] }; // Generic fields array to use in both store defs. //定义头信息 var fields = [ {name: 'name',mapping: 'name'}, {name: 'column1',mapping: 'column1'}, {name: 'column2',mapping: 'column2'} ]; //调用Ext中的JsonStore 产生GridStore对象 var gridStore = new Ext.data.JsonStore({ fields:fields, data:myData, root: 'records' }); // Column Model shortcut array var cols = [ { id: 'name' , header: "Record Name" ,width: 160 ,sortable: true, dataIndex :'name'}, {header: "column1", width: 50, sortable: true, dataIndex: "column1"}, {header: "column2", width: 50, sortable: true, dataIndex: "column2"} ]; // declare the source Grid //用renderTo 标签将对应的EditorGridPanel renderTo 到对应的面板中(<div id="panelGrid"> //</div>) var grid = new Ext.grid.EditorGridPanel({ ddGroup : 'gridDDGroup', store : gridStore, columns : cols, renderTo : 'panelGrid', enableDragDrop : true, stripeRows : true, autoExpandColumn : 'name', width : 30, height : 40, clicksToEdit : true, //region : 'west', title : 'Data Grid' //selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) });
?
?
?
?