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 : '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用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 : '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'}
]
}}]
};
//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]]");
%>*/
分享到:
相关推荐
ext 学习笔记 ext 学习笔记 ext 学习笔记
ext学习笔记代码 ext学习笔记代码 ext学习笔记代码
Gwt-ext学习笔记,Gwt-ext学习笔记,Gwt-ext学习笔记
Ext的学习笔记 Ext的学习笔记 Ext的学习笔记
ext 4.0 学习笔记(1)Array Grid 2011-09-20 13:18 860人阅读 评论(1) 收藏 举报 今天刚开始接触EXT,直接跳过2.2等较旧版本;由于网上的中文资料几乎都是2.2,并且我也是刚开始接触EXT,所以用笔记的方式记录我...
Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址
里面包括Ext学习.doc和Ext学习笔记.doc两份资料。来自网上。
ext学习资料 ext ext技术资料
Yui_ext 学习笔记 MSN:zhoujianguo_leo@hotmail.com
Gwt-ext学习笔记之基础篇、安装、配置、例子。
Ext 手册+学习笔记+资料+实例 Ext 手册+学习笔记+资料+实例 Ext 手册+学习笔记+资料+实例
【ASP.NET编程知识】Ext.Net学习笔记之button小结.docx
开发EXT的过程中总结的一些使用技巧。关于EXT对象封装的一些应用。
ext api,ext 学习笔记,SWFUpload,多文件上传, ext 的环境搭建,及部分api
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现