EXTJS组件化(一)

最新推荐文章于 2024-10-30 19:10:39 发布

xiaoshang

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量723

点赞数

分类专栏： ExtJS 文章标签： extjs function javascript layout 测试 class

ExtJS 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

首先是面向对象的思想建立,EXTJS虽然是基于Javascript的,但是在对象上,写法确实跟Javascript不太一样.EXTJS让Javascript的面向对象更接近强类型后台语言的写法,现在写EXTJS的有很多人没有按照正确的EXTJS式的面向对象的思想去写,例如一个简单的对象:

Ext.ns(“Ext.ux.Panel”);

Ext.ux.Panel=function(){

    return new Ext.Panel();

}

这样写是没有错误的,EXTJS底层很多也是这样写的例如基类Observable

EXTUTIL.Observable.prototype = function(){
    var filterOptRe = /^(?:scope|delay|buffer|single)$/, toLower = function(s){
        return s.toLowerCase();
    };

    return {
        //省略若干代码
    }

这就是Javascript最常用的写法,但是在开发过程中我们能这样去写EXTJS对象吗?
在大多数情况下这显然是不可行的,当整个项目采用Extjs编写之后,这样的代码会让接手的人有一种无从下手的感觉(这个人可能就是两三个月后的你自己).
我们应该怎么样去写一个对象让代码看起来更简洁清晰呢?还是查看EXTJS的源码,UI组件Window最能说明问题:

Ext.Window = Ext.extend(Ext.Panel, {
    //省略若干属性
    baseCls : 'x-window',
    //.......省略若干属性
    initComponent : function(){
        Ext.Window.superclass.initComponent.call(this);
        //省略若干函数体
    }
    //.......省略若干函数

Window是继承自Panel的,并为Panel添加了拖拽等功能,到这里,一切就真相大白了,Panel继承自BoxComponent,理论上来讲,我们自己的组件完全可以基于Panel来做,我们可以暂且将Panel作为我们所有组件的容器,我们所写的各种组件都可以被包在这个Panel里面去.
我们首先构建出自定义组件(这里以登陆为例)的轮廓:

Ext.namespace("Lesson1.FirstPanel");
/**
 * @author andy_ghg
 * @version 2009年9月24日23:22:09
 * @description 第一个派生类
 * @class Lesson1.FirstPanel
 * @extends Ext.Panel
 */
Lesson1.FirstPanel=Ext.extend(Ext.Panel,{
	frame:true,
	//初始化函数
	initComponent:function(){
		//继承父类的initComponent函数
		Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);
	}
});

//*测试
Ext.onReady(function(){
	var panel=new Lesson1.FirstPanel({
		title:"标题",
		height:300,
		width:400,
		renderTo:Ext.getBody()
	});
});
//*/

运行之后就是一个很普通的Panel,不要着急,我们还要往里面添加东西,登陆需要一个表单,我们继续写下去为这个组件添加一个表单:

Lesson1.FirstPanel=Ext.extend(Ext.Panel,{
	frame:true,
	//初始化函数
	initComponent:function(){
		//继承父类的initComponent函数
		Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);
		//为该组件添加了一个FormPanel
		this.formPanel=new Ext.FormPanel({
			defaults:{anchor:"95%",allowBlank:false},
			labelWidth:55,
			defaultType:"textfield",
			items:[{
				fieldLabel:"用户名",
				name:"username"
			},{
				fieldLabel:"密码",
				inputType:"password",
				name:"password"
			}]
		});
                //将表单列入到panel的items里去
		this.add(this.formPanel);
	}
});

然后我们可以将这个Panel包含在一个Window里面去,让他更像一个登陆窗口:

//*测试
Ext.onReady(function(){
	var panel=new Lesson1.FirstPanel({
		height:100,
		width:300,
		layout:"fit"
	});
	new Ext.Window({
		title:"登陆",
		items:[panel],
		buttons:[{
			text:"确定"
		},{
			text:"取消"
		}]
	}).show();
});
//*/

OK,到此为止,我们已经将这个登陆组件的大框架已经搭建好了,我们现在开始为我们的登录组件添加一个公开的函数让外部去调用:

Ext.namespace("Lesson1.FirstPanel");
/**
 * @author andy_ghg
 * @version 2009年9月24日23:22:09
 * @description 第一个派生类
 * @class Lesson1.FirstPanel
 * @extends Ext.Panel
 */
Lesson1.FirstPanel=Ext.extend(Ext.Panel,{
	frame:true,
	//初始化函数
	initComponent:function(){
		//继承父类的initComponent函数
		Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);
		//为该组件添加了一个FormPanel
		this.formPanel=new Ext.FormPanel({
			defaults:{anchor:"95%",allowBlank:false},
			labelWidth:55,
			defaultType:"textfield",
			items:[{
				fieldLabel:"用户名",
				name:"username"
			},{
				fieldLabel:"密码",
				inputType:"password",
				name:"password"
			}]
		});
		this.add(this.formPanel);
	},
//      提交表单的函数
	submitForm:function(){
		alert(this.formPanel);
//		this.formPanel.getForm().submit({
//			url:"",
//			success:function(){},
//			failure:function(){}
//		})
	}
});

//*测试
Ext.onReady(function(){
	var panel=new Lesson1.FirstPanel({
		height:100,
		width:300,
		layout:"fit"
	});
	new Ext.Window({
		title:"登陆",
		items:[panel],
		buttons:[{
			text:"确定",
			handler:function(){
				panel.submitForm();
			}
		},{
			text:"取消"
		}]
	}).show();
});
//*/

至此,我不会再继续写下去了,我也不会提供源码,你可以充分发挥你的想象力去改造它,去感受一下这种写法的好处与优点,以及他即将会引发什么样的困惑.思考之后你才能有更深刻的了解.(你可以直接继承Window而不是继承Panel来做这个登录组件)

转载地址：http://andy-ghg.iteye.com/blog/476907