在ExtJs中,关于类的声明和对象的创建
//js中类的声明其实就是一个function
//第一种:
/**
function user(){
//相当于java的public
this.name = 'sd';
this.age = 26;
//var 就相当于高级语言当中的private
var email = 'yyy@mail.com';
this.getEmail = function(){
return email;
}
}
var u = new user();
alert(u.getEmail());
//第二种
var Person = {
name:'dfsd',
age:24
};
alert(Person.name + " " + Person.age);
*/
//Ext中类的声明
Ext.onReady(function(){
/**
//第一种:使用new
var win = new Ext.window.Window({
title:'dsfsafsd',
width:400,
height:300
});
// win.show();
//1、得到那个那妞的dom对象
//2、为按钮对象添加单击的事件
//3、单击的时候调用对象win的show方法
Ext.get('d1').on('click',function(){
win.show();
});
*/
//第二种,使用Ext.create
/**
var win = new Ext.create('Ext.window.Window',{
title:'dsfsafsd',
width:400,
height:300
});
win.show();
*/
//第三种:使用Ext.define,
/**
Ext.define('MyWin',{
extend:'Ext.window.Window',
title:'dsfsafsd1111111111',
width:400,
height:300,
setTitle:function(){
this.title = 'new title';
},
initComponent:function(){
this.setTitle();
this.callParent(arguments);
}
});
*/
//一般的做法是将define部分单独写入一个js文件,然后再jsp中进行引用
//如新建一个ux文件夹,在其中定义n_01_js_mywin.js,引入<script type="text/javascript" charset="utf-8" src="base/ux/n_01_js_mywin.js"></script>
//这样,程序会很小很干净
//有一个问题,当我们定义的组件很多时,在jsp的头中需要引入很多js
//解决问题,消除:<script type="text/javascript" charset="utf-8" src="base/ux/n_01_js_mywin.js"></script>这样的引用
//方案,就是使用动态加载,前面讲过
Ext.Loader.setConfig({ //设置Ext动态加载
enabled:true,
paths:{
myApp:'base/ux' //加载的路径
}
});
Ext.get('d1').on('click',function(){
var win = Ext.create('base.ux.MyWin',{
newarg:800,
requires:['base.ux.MyWin'] //requires 动态加载
});
alert(win.getNewarg());
alert(win.getHhq());
win.show();
});
});
关于动态加载这一块,使用ExtJs4.2,我是过将
// Ext.Loader.setConfig({ //设置Ext动态加载
// enabled:true,
// paths:{
// myApp:'base/ux' //加载的路径
// }
// });
这一段设置去掉,也能执行成功,然后呢,将
// requires:['base.ux.MyWin'] //requires 动态加载
去掉,也能执行,这个程序示例,这一句Ext.create('base.ux.MyWin',只要类的定义及创建时类的名字写全,即包名要写全,就能找到,文件名要与类的名字完全一样,路径要一样,即js文件的存放路径要与类定义的包名一致。
关于混入
//混入:mixins
//1、简单地混入,mixins:直接跟混入类的数组
/**
Ext.define('CanSing', {
sing: function() {
alert("I'm on the highway to hell...")
}
});
Ext.define('Musician', {
mixins: ['CanSing'], //跟类的数组
mSing:function(){alert('Musician 的mSing');}
});
var m = Ext.create('Musician');
m.sing();
m.mSing();
*/
//2、如果混入多个类,且这些类有相同的方法,或被混入类定义方法与混入类相同,使用对象
Ext.define('CanSing', {
sing: function() {
alert("CanSing I'm on the highway to hell...")
}
});
Ext.define('CanSing1', {
sing: function() {
alert("CanSing1.....")
}
});
Ext.define('Musician', {
mixins: { //相当于类多了几个指向混入类的引用
canSing: 'CanSing',
canSing1:'CanSing1'
},
sing: function() {
// delegate singing operation to mixin
this.mixins.canSing.sing.call(this);
}
});
var m = Ext.create('Musician');
m.sing();
m.mixins.canSing1.sing(); //使用不同混入类的方法
base.ux.MyWin这个类:在WebRoot/base/ux下建立MyWin.js
Ext.define('base.ux.MyWin',{
extend:'Ext.window.Window',
title:'dsfsafsd1111111111',
width:400,
height:300,
hhq:'ppp', //这个属性不会自动生成get/set
getHhq:function(){return this.hhq ;},//需要自己写
config:{ //config中设置的属性会自动生成get set方法
newarg:900
},
setTitle:function(){
this.title = 'new title';
},
initComponent:function(){
this.setTitle();
this.callParent(arguments);
}
});