extjs1

对象的创建

function user(){

this.name ='';

this.age= 26;

var email = "yy@com.cn";

this.getEmail=function(){

return email;

}

}

var u = new user();

var person = {name:"wangjin",age:26};

(function(){

//命名空间

Ext.Loader.setConfig({

enabled:true,

paths:{

myApp:'code/ux'

}

});

Ext.onReady(function(){

var win = new Ext.window.Window({

width:400,

height:300,

title:'ww'

});

win.show();

Ext.get("id").on("click",function(){

win.show();

})

var o ={

say:function(){

}

};

//取别名

var fn = Ext.Function.alias(o,'say');

fn();

var win = Ext.create('Ext.window.Window',{

width:'400',

height:'300',

title:'uspcat'

});

win.show();

var win = Ext.create("ux.myWin",{

title:'sss',

price:600,

require:['ux.myWin']

});

alert(win.getPrice());

win.show();

Ext.define("say",{

cansay:function(){

alert("say");

}

})

Ext.define("sing",{

sing:function(){

alert("sing");

}

})

Ext.define("user",{

mixins:{

say:'say'

sing:'sing';

}

})

var u = Ext.create("user",{});

u.cansay();

});

};()

//继承一个类 在code/ux下

Ext.define("ux.myWin",{

extend:"Ext.window.Window",

width:'400',

height:'400',

title:'uspcat',

config:{

price:'500'

},

mytitle:'myuspcat',

mySetTitle:function(){

this.title=mytitle;

},

initComponent:function(){

this.mySetTitle();

this.callParent(arguments);

}

})

///config 自动生成get set方法

//mixins 多继承 extends只能打单继承

二、extjs4.0的数据模型

model proxy reader

1：普通的Model的创建

数据模型对真实世界中实物在系统的反应 extjs的model相当于db中的table java中的class

2.利用Ext.regModel创建模型

3.创建model实例 实例化对象的方法

4.validations

5.

6.简单数据代理

(function(){

Ext.onReady(function(){

//利用Ext.define来创建模型类

//db table person(name,age,email)

Ext.define("person",{

extend:"Ext.data.Model",

fields:[

{name:'name',type:'auto'},

{name:'age',type:'int'},

{name:'email',type:'auto'}

]

});

//MVC模式中model一定是M层

Ext.regModel("user"),{

fields:[

{name:'name',type:'auto'},

{name:'age',type:'int'},

{name:'email',type:'auto'}

]

});

//实例化person类 new

var p = new person({

name:'uspcat.com',

age:26,

email:'1017951385@qq.com'

});

//alert(p.get('name'));

var p1= Ext.create("person",{

name:'uspcat.com',

age:26,

email:'1017951385@qq.com'

});

//alert(p1.get('name'));

var p2 = Ext.ModelMgr.create({

name:'uspcat.com',

age:26,

email:'1017951385@qq.com'},'person');

//alert(p2.get('email'));

//alert(p2.getName()); ? class object.getClass().getName();

//alert(person.getName());

});

})();

//validations.js

(function(){

Ext.data.validations.lengthMessage="错误的长度";

Ext.onReady(function(){

//扩展原生的extjs函数

Ext.apply(Ext.data.validations,{

age:function(config,value){}

var min = config.min;

var max = config.max;

if(min<=value&&value<=max){

return true;

}else{

return false;

}

ageMessage:'age数据出现的了错误'

}

);

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:'uspcat.com',

age:26,

email:'1017951385@qq.com'

});

//return errors

var errors= p1.validate();

var erroInfo = [];

errors.each(function(v){

erroInfo.push(v.field+" "+ v.message );

});

alert(erroInfo.join("\n"));

// name 2--6个字符

/// set(String name){

// if(){

// }else{

// }

// }

//}

})();

//数据代理 proxy.js

(function(){

Ext.onReady(function(){

Ext.define("person",{

extend:"Ext.data.Model",

fields:[

{name:'name',type:'auto'},

{name:'age',type:'int'},

{name:'email',type:'auto'}

],

proxy:{

type:'ajax',

url:'person.jsp'

}

});

var p = Ext.ModelMangager.getModel("person");

p.load(1,{//1代表id

scope:this,

failure:function(record,operation){

},

success:function(record,operation){

alert(record.data.name);

},

callback:function(record,operation){

}

});

}

}

)();

7.Model的一对多和多对一 在这我们先简单了解，在讲完Ajax之后我们在深入学习

onetomany

(function(){

Ext.onReady(function(){

Ext.regModel("teacher",{

fideld:[

{name:'teacherId',type:"int"},

{name:'name',type:'auto'}

],

hasMany:{

model:'student',

name:'getStudent',

filterProperty:'teacher_Id'

}

});

Ext.regModel("student",{

fideld:[

{name:'studentId',type:"int"},

{name:'name',type:'auto'},

{name:'teacher_Id',type:'int'}

]

});

t.students 得到子类的一个store数据集合

});

})();

//person.jsp

<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<%

response.getWriter().write("{name:'uspcat.com',age:26,email:'1017951385@qq.com'}")

%>

四讲

数据代理是进行数据读写的主要途径，通过代理操作数据进行crud

每一步操作全会得到唯一的Ext.data.Operation实例他包含所有的请求参数

1.数据代理proxy目录结构

Ext.data.proxy.Proxy

Ext.data.proxy.Client 客户端代理

Ext.data.proxy.Memory 普通的内存代理

Ext.data.proxy.WebStorage 浏览器客服端存储代理

Ext.data.proxy.SessionStorage 浏览器级别代理

Ext.data.proxy.LocalStorage 本地化的级别代理

Ext.data.proxy.Server 服务端代理

Ext.data.proxy.Ajax 异步请求

Ext.data.proxy.Rest 一种特使的ajax

Ext.data.proxy.JsonP 跨域交互的代理

Ext.data.proxy.Direct 命令

3+方式代理

//memory.js

(function(){

Ext.onReady(function(){

Ext.regModel("user",{

fields:[

{name:'name',type:'string'},

{name:'age',type:'int'}

]

});

//不用create方法 直接用proxy来创建对象数据

var userData=[{name:'uspcat.com',age:1},{name:'wangjin',age:26}];

//创建model的代理类

var memoryProxy = Ext.create("Ext.data.proxy.Memory",{

data:userData,

model:'user'

});

userData.push({name:'new uspcat.com',age:22});

memoryProxy.update(new Ext.data.Operation({

action:'update',

data:'userData'

}),function(result){},this);

memoryProxy.read(new Ext.data.Operation(),function(result){

var datas = results.resultSet.records;

Ext.Array.each(datas,function(model){

alert(model.get('name'));

});

});

});

})();

//localstoreage.js

(function(){

Ext.onReady(function(){

Ext.regModel("user",{

fields:[

{name:"name",type:"string"}

],

proxy:{

type:'localstorage', //不能跨浏览器 sessionstorage关闭浏览器数据丢失

id:'twitter-Seachers'

}

});

//用store来出初始化数据

var store = new Ext.data.Store({

model:user

});

store.add({name:"wangjin"});

store.sync();

store.load();

var msg=[];

store.each(function(record){

msg.push(rec.get('name'));

});

alert(msg.join("\n"));

});

})();

//ajax的案例ajax.js

(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',

directions:'asc'

})

]

}),function(o){

var text = o.response.responseText;

alert(Ext.JSON.decode(text)['name']);

});

});

})();

(function(){

Ext.onReady(function(){

});

})();

//跨域交互的代理 zendstudio

(function(){

Ext.onReady(function(){

Ext.regModel("person",{

fields:[

{name:"name",type:"string"}

],

proxy:{

type:'jsonp',

url:''http://www.uspcat.com/extjs/person.php

}

});

var person = Ext.ModelManager.getModel('person');

person.load(1,{

scope:this,

success:function(model){

alert(model.get('name'));

}

});

});

})();