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 protected]'   });   //alert(p.get('name'));
  var p1 = Ext.create("person",{    name:'uspcat.com',    age:26,    email:'[email protected]'   });   //alert(p1.get('age'));
  var p2 = Ext.ModelMgr.create({    name:'uspcat.com',    age:26,    email:'[email protected]'   },'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:'[email protected]'   });    var errors = p1.validate();   var errorInfo = [];   errors.each(function(v){    errorInfo.push(v.field+"  "+v.message);   });   alert(errorInfo.join(""));
 
 
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();
		
})