Extjs4.0的新特性
Extjs的新特性
1． Js类的声明和对象的创建
//js中类的声明和调用
function user() {
//相当于是public 共有的
this.name = 'laowang'
this.age = 23
var qq = '2423qq.com'
//相当于是私有的 private
this.getQq = function() {
return qq;
}
}
var u = new user();
alert(u.name + " " + u.age + " " + u.getQq());
2． 原始方法用extjs创建一个window
Ext.onReady(function() {
var win = new Ext.window.Window( {
width : 400,
height : 300,
title : 'laowang'
});
win.show();
});
3． 利用一个按钮出发window窗体，了解一个extjs的事件机制
（1）首先在jsp页面中有一个单击按钮：
<button id="mybutton">点击</button>
（2）然后再js中是：当点击的时候触发的事件显示窗体
Ext.onReady(function() {
var win = new Ext.window.Window( {
width : 400,
height : 300,
title : 'laowang'
});
//win.show();
//当点击按钮的时候触发事件，弹出窗体
//1.得到按钮的dom对象
//2.为按钮对象添加单机的事件
//3.单击的时候调用window的show方法
Ext.get("mybutton").on("click", function() {
win.show();
});
//on 是单击触发时的事件，就相当于事件监听器
});
4． 用extjs4.0的create来创建window
var win = Ext.create("Ext.window.Window", {
width : 400,
height : 300,
title : 'laowang'
})
win.show();
5． 利用define自定义类并且继承（extennd）window
相当于是类的扩展吧！
Ext.define("mywin",{
extend:'Ext.window.Window',
width : 400,
height : 300,
//设置了新的标题，用函数，在初始化的时候调用此函数
newtitle:'new laowang',
mySetTitle:function(){
this.title = newtitle;
},
title : 'laowang'
// initComponent：function(){
// this.mySetTitle();
// this.callParent(argumnets);
// }
})
Ext.create("mywin",{
title:'my win'
}).show();
6． Requires js的异步加载
把自己扩展的类提取到一个js中，只在使用的时候调用它，比如把一个类放到了名为mywin.js的文件中：
//利用define自定义类并且继承（extennd）window ,相当于类的的扩展,
Ext.define("ux.mywin",{
extend:'Ext.window.Window',
width : 400,
height : 300,
newtitle:'new laowang',
mySetTitle:function(){
this.title = newtitle;
},
title : 'laowang'
initComponent：function(){
this.mySetTitle();
this.callParent(argumnets);
}
})
在另一个js中调用的时候为：
var win = Ext.create("ux.mywin",{
title:'my win',
requires:['ux.mywin']
}).show();
也就是说只有在使用的时候才加载，减少了加载的重量，也不用在不需要的时候引入不必要的js，这是extjs4.0的优点
Create是实例化一个类，也就相当于是new一个类
7． Config自动的get和set
在自己创建了类中用config定义一个属性，为：
config:{
price:500
},
在调用的时候系统会自动的增加get和set方法，所以在输出的时候可以写为：
alert(win.getPrice());
来源为：
var win = Ext.create("ux.mywin",{
title:'my win',
price:600,
requires:['ux.mywin']
});
//在用config定义了之后可以调用getPrice（）方法使用
alert(win.getPrice());
8． Mixins 类的混合
Ext.define("say", {
cansay : function() {
alert("laowang can say");
}
})
Ext.define("sing", {
sing : function() {
alert("laowang can sing");
}
})
Ext.define('user', {
mixins : {
say : 'say',
sing : 'sing'
}
});
var u = Ext.create("user", {});
u.cansay();
u.sing();
类的混合是用一个类来拥有多个用途，比如在实际中可以让按钮移动等等