Extjs4 study notes

Model:

  //创建类2种方式

  Ext.define("person",{
   extend:"Ext.data.Model",
   fields:[
    {name:'name',type:'auto'},
    {name:'age',type:'int'},
    {name:'email',type:'auto'}
   ]
  });

  Ext.regModel("user",{
   fields:[
    {name:'name',type:'auto'},
    {name:'age',type:'int'},
    {name:'email',type:'auto'}
   ]
  });

  //实例化我们的person类
  //1.new关键字
  var p = new person({
   name:'uspcat.com',
   age:26,
   email:'jophy@126.com'
  });
  //alert(p.get('name'));

  var p1 = Ext.create("person",{
   name:'uspcat.com',
   age:26,
   email:'jophy@126.com'
  });
  //alert(p1.get('age'));

  var p2 = Ext.ModelMgr.create({
   name:'uspcat.com',
   age:26,
   email:'jophy@126.com'
  },'person');
  //alert(p2.get('email'));
  //alert(p2.getName());//? class object.getClass.getName
  alert(person.getName());

 

validation:

  Ext.define("person",{
   extend:"Ext.data.Model",
   fields:[
    {name:'name',type:'auto'},
    {name:'age',type:'int'},
    {name:'email',type:'auto'}
   ],
   validations:[
    {type:"length",field:"name",min:2,max:6},
    {type:'age',field:"age",min:0,max:150}
   ]
  });
  var p1 = Ext.create("person",{
   name:'xyz.com',
   age:-18,
   email:'jophy@126.com'
  }); 
  var errors = p1.validate();
  var errorInfo = [];
  errors.each(function(v){
   errorInfo.push(v.field+"  "+v.message);
  });
  alert(errorInfo.join("\n"));

 

 

Proxy:

 

ajax

(function(){
	Ext.onReady(function(){
		Ext.regModel("person",{
			fields:[
				{name:'name',type:'string'}
			]
		});
		var ajaxProxy = new Ext.data.proxy.Ajax({
			url:'person.jsp',
			model:'person',
			reader:'json',
			limitParam : 'indexLimit'
		});	
		ajaxProxy.doRequest(new Ext.data.Operation({
				action:'read',
				limit:10,
				start :1,
				sorters:[
					new Ext.util.Sorter({
						property:'name',
						direction:'ASC'
					})
				]
			}),function(o){
			var text = o.response.responseText;
			alert(Ext.JSON.decode(text)['name']);
		});
	});
})();

memory

(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name',type:'string'},
				{anem:'age',type:'int'}
			]
		});
		//不用create方法 我们直接用proxy来创建对象数据
		var userData = [
			{name:'jophy.com',age:1},
			{name:'alice',age:25}
		];
		//创建model的代理类
		var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
			data:userData,
			model:'user'
		})
		
		userData.push({name:'new uspcat.com',age:1});
		//update
		memoryProxy.update(new Ext.data.Operation({
			action:'update',
			data:userData
		}),function(result){},this);
		
		//就可以做CRUD了
		memoryProxy.read(new Ext.data.Operation(),function(result){
			var datas = result.resultSet.records;
			Ext.Array.each(datas,function(model){
				alert(model.get('name'));
			})
		});
	});
})();

jsonp

(function(){
	Ext.onReady(function(){
		Ext.regModel("person",{
			fields:[
				{name:'name',type:'string'}
			],
			proxy:{
				type:'jsonp',
				url:'http://www.jophy.com/extjs/person.php'
			}
		});
		var person = Ext.ModelManager.getModel('person');
		person.load(1,{
			scope:this,
			success:function(model){
				alert(model.get('name'));
			}
		});
	})
})();

 

person.php contents

<?php
echo "Ext.data.JsonP.callback1({name:'alice'})";
?>

  

 

Reader & Write

reader array

Ext.onReady(function(){
	Ext.regModel("person",{
		fields:[
			'name','age'
//			{name:'name'},
//			{name:'age'}
		],
		proxy :{
			type:'ajax',
			url:'person.jsp',
			reader:{
				type:'array'
			}
		}
	});
		var person = Ext.ModelManager.getModel('person');
		person.load(1,{
			success:function(model){
				alert(model.get('name'))
			}
		})
});

 

reader json

(function(){
	Ext.onReady(function(){
		var userData = {
			//total : 200,
			count:250,
			user:[{auditor:'jophy',info:{
				userID:'1',
				name:'uspcat.com',
				orders:[
					{id:'001',name:'pen'},
					{id:'002',name:'book'}
				]
			}}]
		};
		//model
		Ext.regModel("user",{
			fields:[
				{name:'userID',type:'string'},
				{name:'name',type:'string'}
			],
			hasMany: {model: 'order'}
		});
		Ext.regModel("order",{
			fields:[
				{name:'id',type:'string'},
				{name:'name',type:'string'}
			],
			belongsTo: {type: 'belongsTo', model: 'user'}
		});
		var mproxy = Ext.create("Ext.data.proxy.Memory",{
			model:'user',
			data:userData,
			reader:{
				type:'json',
				root:'user',
				implicitIncludes:true,
				totalProperty:'count',
				record : 'info'//服务器返回的数据可能很负载,用record可以删选出有用的数据信息,装在带Model中
			}
		});
		mproxy.read(new Ext.data.Operation(),function(result){
			var datas = result.resultSet.records;
			alert(result.resultSet.total);
			Ext.Array.each(datas,function(model){
				alert(model.get('name'));
			});
			var user = result.resultSet.records[0];
			var orders = user.orders();
			orders.each(function(order){
				alert(order.get('name'))
			});
			
		})
	});
})();

reader xml

(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name'},
				{name:'id'}
			],
			proxy:{
				type:'ajax',
				url:'users.xml',
				reader:{
					type:'xml',
					record:'user'
				}
			}
		});	
		var user = Ext.ModelManager.getModel('user');
		user.load(1,{
			success:function(model){
				alert(model)
				alert(model.get('id'))
			}
		})
	});
})();

xml

<users>
	<user>
		<name>jophy.com</name>
		<id>00101</id>
	</user>
</users>

 

 write

Ext.onReady(function(){
	Ext.regModel("person",{
		fields:[
			'name','age'
		],
		proxy :{
			type:'ajax',
			url:'person.jsp',
			writer:{
				//type:'json'
				type:'xml'
			}
		}
	});
	Ext.ModelMgr.create({
		name:'uspcat.con',
		age:1
	},'person').save();
		
})