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();

类的混合是用一个类来拥有多个用途，比如在实际中可以让按钮移动等等