Ext 表格的使用

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