EXT4学习札记

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.MyWinpaths : {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的子类Personextend : '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 : 'xiaoming@qq.com'});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 : * 'xiaolong@qq.com' }); 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用localstorageid : '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 : 'xxdf@fff.com'}, {name : 'xiaoming',age : 23,email : 'xxxc@126.com'}];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'}]}}]};//modelExt.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]]");%>*/

?