Extjs 学习ing

启用Ext.Loader

(function(){
	Ext.Loader.setConfig({
		enabled:true
	});
	ext.onReady(function(){
   
	
	})

})();

创建数据模型对象 model

// Model定义为字段、任意方法和与模型相关的属性的集合( 如 validations 验证器等）

//define   创建
Ext.define('student',{
	extend:'Ext.data.Model',
	fields:[
		{name:'studentName',type:'string'},
		{name:'class',type:'auto'},
		{name:'address',type:'string'}
	]
});
//  regModel   创建
Ext.regModel('student'，{
	fields:[
		{name:'studentName',type:'string'},
		{name:'class',type:'auto'},
		{name:'address',type:'string'}
	]
})
//  define 和regModel regModel 不需要配extend   属性，  regModel 继承le Ext.data.Model类

实例化对象

//1、new  关键字
var obj=new student({
	name:'张三',
	class:'初一',
	address:'xxxxx'
})
//2、Ext.create 方法创建，extjs4.0  推荐的对象创建方法
var obj=Ext.create('student',{
    name:'张三',
	class:'初一',
	address:'xxxxx'
})
//3、Ext.ModelManager.create 方法创建   别名    Ext.ModelMgr.create
var p=Ext.ModelMgr.create({
	name:'张三',
	class:'初一',
	address:'xxxxx'
},'student')

Ext.data.Store

Store类封装了一个客户端缓存,用于存储 Model 对象. Stores 通过一个代理 Proxy 来加载数据, 并提供函数来排序, 过滤以及查询内部所包含的 model 实例. 创建Store非常简单 - 我们只需要传入 Model 以及用来加载/保存数据的Proxy作为配置项即可:

 // 建立一个store要使用的 model
 Ext.define('User', {
     extend: 'Ext.data.Model',
     fields: [
         {name: 'firstName', type: 'string'},
         {name: 'lastName',  type: 'string'},
         {name: 'age',       type: 'int'},
         {name: 'eyeColor',  type: 'string'}
     ]
 });
 
 var myStore = Ext.create('Ext.data.Store', {
     model: 'User',
     proxy: {
         type: 'ajax',
         url: '/users.json',
         reader: {
             type: 'json',
             root: 'users'
         }
     },
     autoLoad: true
 });

（2）内联数据
Store 也可以加载内部指定的数据. 在内部, Store 将我们传入的对象作为data,转换为Model实例。示例如下:
Ext.create(‘Ext.data.Store’, {
model: ‘User’,
data : [
{firstName: ‘Ed’, lastName: ‘Spencer’},
{firstName: ‘Tommy’, lastName: ‘Maintz’},
{firstName: ‘Aaron’, lastName: ‘Conran’},
{firstName: ‘Jamie’, lastName: ‘Avins’}
]
});
（3）过滤与排序
Store 可以进行排序和过滤 - 两种操作既可以在本地执行,也可以远程执行. 排序 sorters 和过滤 filters 都是在 MixedCollection 实例内部执行的, 这种封装使得容易管理和使用. 通常在 Store的配置项中指定 sorters 和 filters 就可以了,当然也可以调用 sort 和 filter 方法:
var store = Ext.create(‘Ext.data.Store’, {
model: ‘User’,
sorters: [{
property: ‘age’,
direction: ‘DESC’
}, {
property: ‘firstName’,
direction: ‘ASC’
}],

 // 必须包含字母E或者d
 filters: [{
     property: 'firstName',
     value: /Ed/
 }]

});

代理 Proxy

(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name',type:'string'},
				{name:'age',type:'int'}
			],
			proxy:{
				type:'ajax',//ajax  代理
				url:'users.xml',
				//阅读器  类型xml样式
				reader:{
					type:'xml',
					record：'user'//主要数据
				}
		
			}
      
		});
		//模型管理器 ModelManager
		var user=Ext.ModelManager.getModel('user');
		user.load(1,{
			success:function(model){
				alert(model);
				alert(model.get('name'))
			}
		})
		
	
	})
})();
//  代理  的  写入器

Ext.onReady(function(){
	fields:[
		{name:'name'},
		{name:'age'}
	],
   //  如果没有标明field具体类型等情况可以简写如下
   //   fields:['name','age']
   proxy:{
		type:'ajax',
		url:'person.jsp',
		//代理写
		write:{
			type：'json',
			//type:'xml'
		}
	}

});
Ext.ModelMgr.create({name:'Ares',age:10},'person').save();

用Ext.data.proxy.Ajax对象实现ajax

Ext.onReady(function(){
	
	//模型类 , 相当于class
	Ext.define("person",{
		extend:"Ext.data.Model",
		fields:[
		        {name:'name',type:'string'},
		        {name:'age',type:'int'}
		 ]
	});
	
	//==>代理对象 , 用对象的 doRequest()方法获取数据
	var ajaxProxyObj = Ext.create("Ext.data.proxy.Ajax",{
		url : "fakeData.jsp",
		model : "person",
		reader : "json",
		limitParam : "indexParm" //参数未修改前默认叫"limit" , 通过这类描述可以修改字段名称
	});
	//拿到回应中的字串( 没decode解码), 和转成原生Js对象
	ajaxProxyObj.doRequest( new Ext.data.Operation({
					action:"read",//读方式
					//后台能拿到其余参数的json对象, 再做处理 最终再返回前台
					limit:3,//分页数据
					start:1,
					sorters:[ //排序数组 Ext.util.Sorter
					         {
					        	 property:"name",
					        	 direction:"ASC"
					         },{
					        	 property:"age",
					        	 direction:"ASC"
					         }
					 ]
					//还可以实现过滤器, 分组
			}) , function(obj){
					alert(obj);//chrome的F12调试工具 Sources , 右侧Scope Variables
					var txt = obj.response.responseText;拿到回应中的字串( 没decode解码)
					alert( Ext.JSON.decode(txt)['name'] );//解码成一个对象(但是不是model,仅是原生Js对象)
	});
	
});

用localstorage代理 , 代替cookies

Ext.onReady(function(){
	
	//模型类 , 相当于class
	Ext.define("person",{
		extend:"Ext.data.Model",
		
		fields:[
		        {name:'name',type:'string'},
		        {name:'age',type:'int'}
		 ],
		 //==>代理类 , 用Model类的load()方法获取数据
		 proxy:{
			 type:"localstorage"//,本地存储 , 目的是代替cookies不怕禁用cookies  .  
			//model: 配置可以省略, 因为就在本model之中
			
			//用 type:"ajax"的话需要配置 url:"fakeData.jsp"	
			// type:"sessionstorage"	 相当于session 关闭浏览器后会被删除
			 //id:"twitter-Searches"
		 }
 
	})
	
	//==>model的集合是store
	var store = Ext.create("Ext.data.Store",{
		model:person
	});
	//添加一条
	store.add({name:"store添加的", age:7 });
	//异步保存
	store.sync();
	//取出展示
	store.load();
	var msgArray = [];
	store.each( function(v){
		msgArray.push( v.get('name') + "__" + v.get('age'));
	});
	alert(msgArray.join("\n"));
	
	var p = Ext.ModelMgr.getModel( "person" );//传入名字
	p.load( null , {
		scope:this,
		failure:function(record , operation)
		{
			alert(record);
		},
		success: function(record , operation)
		{
			alert(record.data.name);
		},
		callback:function(record , operation)
		{
		}
		
	});
	
});

store ,proxy

(function(){
	Ext.Loader.setConfig({
		enabled:ture
	});
	Ext.onReady(function(){
	//-------------------------------------
		Ext.define("person",{
			extend:'Ext.data.Model',
			fields:[
				{name:'name'},
				{name:'age'}
			],
			proxy:{
				type:'memory'
			}
		})
   //-------------------------------------
    var s=new Ext.data.Store({
    //  如果store中有fields，则会自动生成对应的Model模型
			fields:[
				{name:'name'},
				{name:'age'}
			],
			//------------------------------------
			data:[
				{name:'AresWang',age:10},
				{name:'AresZen',age:20}
			],
			//------------------------------------
			proxy:{
				type:'ajax',
				url:'person.js'
			},
			//model:'person',  如果 store里有fields，则就不需要配置model
			//autoload:ture    如果 是ajax代理， 则就不需要配置autoload  
		})  ;  
		s.each(function(model){
			alert(model.get('name'));
		});
		s.load(function(records, operation, success) {
			Ext.Array.each(records,function(model){
					alert(model.get('name'));
				});
   			 console.log('loaded records');
		});
	});








})();