EXT4学习笔记

Ext3.0引入三个文件

<script type="text/javascript" src="${ctxPath}/framework/scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${ctxPath}/framework/scripts/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="${ctxPath}/framework/scripts/ext/resources/css/ext-all.css" />

 EXT4 引入

<link rel="stylesheet" type="text/css"  href="./ext4/resources/css/ext-all.css">
<script type="text/javascript" src="./ext4/bootstrap.js"></script>

 JS中声明对象方法用prototype关键字

Object.prototype.get=function(key,defVal){
				if(this[key]){
					return this[key];
				}
				return defValue;
			}
			var person={name:'UNKNOW',age:26};
			person.name='xiaoming';
			Ext.MessageBox.alert("title",person.get('name'));

声明对象有两种形式

1：普通形式

function User(){
	//相当于java的private 私有变量
	var name='xiaolong';
	//相当于java的public变量
	this.age=26;
	this.getName=function(){
		return name;
	}
};

 2：json形式

var person ={ name:'xiaoming',age:25,getName:function(){return this['name']} };

 

 区别在于 json申明的对象不需要new就可直接使用，普通形式申明的对象须new后才能使用。

 

Ext添加异步加载js的新功能

Ext.onReady(function() {
			Ext.Loader.setConfig({
						enabled : true, // 一定用为true不然会找不到 js.MyWin
						paths : {
							myApp : 'js' // 不知道用什么用
						}
					});
			var myWin = Ext.create("js.MyWin"// 这儿会异步加载 js/MyWin.js
					, {
						html : 'ffff',
						price:600,//初始换config里的price变量
						xxx:'vvv'
						// requires : ['myApp']//异步加载
				})
				alert(myWin.getPrice());
			Ext.get('test1').on('click', function(t1) {
						myWin.setNewTitle();
						
						myWin.show();
					})
		});

 

 

Ext.define()方法的 config 自动生成属性get和set

Ext.define("js.MyWin", {
		config: {
			   price: 500
			},
			extend : 'Ext.window.Window',
			width : 300,
			height : 400,
			newTitle : 'new title',
			setNewTitle : function() {
				this.title = this.newTitle;
			},
			initComponent : function() {
				this.callParent();
				
			}
		});

 
Ext.define 的mixins   类的混合 作用相当于继承

Ext.define("say",{
			cansay:function(){
				alert("hello");
			}
		})
		Ext.define("sing",{
			sing:function(){
				alert("sing hello 123");
			}
		})
		Ext.define('user',{
			mixins :{//相当于继承
				say : 'say',
				sing: 'sing'
			}
		});
		var u = Ext.create("user",{});
		u.cansay();
		u.sing();

 Ext.data.Model相当于数据库中的一张表

Ext.onReady(function() {
	Ext.data.validations.lengthMessage = '长度不正确';//改变验证错误提示信息
	Ext.define("Person", {//定义一Model的子类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
						}],
				proxy : {//设置加载代理
					type : 'ajax',
					url : '/ext-helloword/lesson3.jsp'
				}

			});
	Ext.apply(Ext.data.validations, {//重写Ext.data.validations类的属性
				lengthMessage : '长度不正确xxx'
			});

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

	var person = new Person({
				nam : 'xiaoming',
				age : 16,
				email : '[e-mail]'
			});
	var P1=Ext.ModelManager.getModel("Person");//得到数据模型
	P1.load('1', {//重新加载数据，参数1 会作为id传到后台
				success : function(p) {
					console.log(p.data.name); // 
				}
			});
				/*
	var errors = person.validate();//调用验证
	var errorMsg = [];
	errors.each(function(item) {
				alert(item.field + item.message);
				errorMsg.push(item.field + item.message);

			})
		// Ext.MessageBox.alert("title", person.get('name'));
	
		 * var user1 = Ext.create("User", { name : 'xiaolong', age : 26, email :
		 * '[e-mail]' }); Ext.MessageBox.alert(user1.get('name')); var
		 * person2 = Ext.ModelManager.create({ name : 'longwu' }, "Person")
		 * alert(person2.get('name'));
		 */
	});

 

Ext.data.proxy包

保存数据到本地浏览器session

Ext.onReady(function() {
			Ext.regModel("person", {
						fields : [{
									name : 'name',
									type : 'auto'
								}, {
									name : 'age',
									type : 'int'
								}],
						proxy : {
							type : 'sessionstorage',//保存到本地session 保存到本地coockes用localstorage
							id : 'twitter-Searches_session'
						}
					});

			var store = new Ext.data.Store({
						model : person
					});
			store.add({
						name : 'xiaolong',
						age : 22
					});
			store.sync();//保存数据
			store.load();
			var msg = [];
			store.each(function(item) {
						msg.push(item.get('name')+"\n");
					});
			alert(msg)
		});

 

保存到浏览器内存

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

					});
			var data1 = [{
						name : 'cccc.com',
						age : 22,
						email : '[e-mail]'
					}, {
						name : 'xiaoming',
						age : 23,
						email : '[e-mail]'
					}];
			var memoryProxy = Ext.create("Ext.data.proxy.Memory", {//创建本地内储
						data : data1,
						model : user
					});
			var data2 = [{
						name : '444',
						age : 42,
						email : 'fdfds'
					}];
			data1.push({name:'xxxx',age:22,email:'fff'});//放入一条数据
			memoryProxy.update(new Ext.data.Operation({//此处的更新方法没用
						action: 'update',
						data : data2
					}));
			
			memoryProxy.read(new Ext.data.Operation(), function(result) {
						var datas = result.resultSet.records;
						Ext.Array.each(datas, function(item) {
									alert(item.get('name'));
								});
					});
		});

 Ext4 读写器

Reader : 主要用于将proxy数据代理读取的数据按照不同的规则进行解析,讲解析好的数据保存到Modle中
结构图
 Ext.data.reader.Reader 读取器的根类
  Ext.data.reader.Json JSON格式的读取器
   Ext.data.reader.Array 扩展JSON的Array读取器
  Ext.data.reader.Xml XML格式的读取器
Writer
结构图
 Ext.data.writer.Writer
  Ext.data.writer.Json 对象被解释成JSON的形式传到后台
  Ext.data.writer.Xml  对象被解释成XML的形式传到后台

Ext.onReady(function(){
		var userData = {
			//total : 200,
			count:250,
			user:[{auditor:'yunfengcheng',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'))
			});
			
		})
	});

 xml读取

Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name'},
				{name:'id'}
			],
			proxy:{
				type:'ajax',
				url:'users.xml',
				reader:{
					type:'xml',
					record:'user'//记录名/*<users>
								<user>
							<name>uspcat.com</name>
								<id>00101</id>
								</user>
							</users>*/
				}
			}
		});	
		var user = Ext.ModelManager.getModel('user');
		user.load(1,{
			success:function(model){
				alert(model)
				alert(model.get('id'))
			}
		})
	});

 读取后台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'))
			}
		})
});
/*后台JSP数据<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%
	response.getWriter().write("[['yunfengcheng',26]]");
%>*/