?在学习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})
});
?
?
?
?