ExtJs4入门之四: Store类 和 reader , writer

Store的作用就是从Proxy类获得数据 ,然后按规则组装成定义好的Model实例

一:Store类

1.ajax获取数据 并组装成Model

Ext.onReady(function(){
	
	//Ext的M层就是Model和Store
	Ext.define("User",{
		extend:"Ext.data.Model",
		fields:[
		        {name:'name', type:'string'},
		        {name:'age', type:'int'}
		 ]
	 });
	
	var store = Ext.create("Ext.data.Store", {
		model:"User",
		//autoLoad:true, //用Store类的load()方法 ,实现ajax
		proxy:{
			 type : "ajax",
			 url : "fakeData.jsp",
		     reader: {
	             type: 'json',
	             root: 'users'//数据根节点
	         }
		 }
		//内联测试数据		data:[
		//		      { name : "rt" , age :24 },
		//		      { name : "kk" , age :24 }
		//		]
	});
	
	//没有load之前, 或用autoLoad的话遍历结果为空
	//因为ajax获取数据时不会阻塞 , 虽然请求到了数据 但遍历时还为空	
	//		store.each( function( model ){
	//			alert( model.get("name") + "__" + model.get("age"));
	//		})
	
	//==>用Load方法获取数据
	store.load( function( records , operation , success){//获取成功后的回调
		
		Ext.Array.each( records , function( model ){
			alert( model.get("name") + "__" + model.get("age") );
		})
		
		//==>可以定义过滤器和规则
		store.filter( "name" , "rt" );
		store.each( function( aModel ){
			alert( aModel.get("name") + "__" + aModel.get("age"));
		})
		
		//==>find() 第二个参数是正则
		var index = store.find( "name" , "rt" , 0 , false , true , false);
		alert( "find出的编号==>" + index );
		
	});

});

2.数据

<%@ page language="java"  contentType="text/html" pageEncoding="UTF-8"%>
<%

	response.getWriter().write( "{ 'users':[ { 'name':'rt' , 'age':24 } , { 'name':'kk' , 'age':24 }  ]}" );
		
%>

二:reader

有个"一对多"关系

Ext.onReady(function(){
	
	var data1 = {
			totalCount : 100,
			user : [
			        {
						userId :1,
						name:"rt",
						orders:[
						        {oderid:1 , name:"one"},
						        {oderid:2 , name:"two"}
						]
			        } ,			     
			        {
						userId :2,
						name:"kk",
						orders:[
						        {oderid:3 , name:"three"},
						        {oderid:4 , name:"four"}
						]
			        } ,
			]
	}
	
	//模型类 , 相当于class
	Ext.define("User",{
		extend:"Ext.data.Model",
		fields:[
		        {name:'userId', type:'int'},
		        {name:'name', type:'string'},
		 ],
		 //==> 一对多关系 name代表去之后的命名, 默认就是 "model名称+s"
		 hasMany: { model:"Order" }//,  name:"Orders"
	 });
	Ext.define("Order",{
		extend:"Ext.data.Model",
		fields:[
		        {name:'orderId', type:'int'},
		        {name:'name', type:'string'},
		 ],
		 //==>多对一关系
		 belongTo:{ type:"belongsTo" , model:"User"}
	 });
	
	
	//==>reader 目的是把proxy获取的数据组装成相应model
	//用内存代理演示
	var memProxy = Ext.create("Ext.data.proxy.Memory",{
			model : "User",
			data : data1,
			reader:{
				type : "json",
				root : "user",
				implicitIncludes:true,//把Many一侧数据一起读出来
				totalProperty : "totalCount" //总数 ,默认是"total"
				//record: "" 只取得目的对象(筛选有效的信息)
			}
	});

	
	//==>读
	memProxy.read( new Ext.data.Operation(), function(obj){
		var dataArray = obj.resultSet.records;
		//		alert( obj.resultSet.total);//总数
		Ext.Array.each(dataArray, function(aUser){
			alert(aUser.get("name") +"__"+aUser.get("userId")); //model类型可以用get相应属性的方法
			//一个子数据的内层循环
			aUser.orders().each( function( o ){//aUser.orders()取出order对象
				alert( o.get("name") );
			});
		
		});
	});
	
});

三:writer

Ext.onReady(function(){
	
	Ext.define("User",{
		extend:"Ext.data.Model",
		fields:[
		        {name:'name', type:'string'},
		        {name:'age', type:'int'}
		 ],
		 proxy:{
			 type : "ajax",
			 url : " fakeData.jsp",
			 writer:{
				 type : "json"
			 }
		 }
	 });
	
	//==>写
	var u = Ext.ModelMgr.create({
			name:"writer写的",
			age:777
	} ,"User");
	u.save();//model类的方法
	
});