学步园

在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);
		}
	});