对于一些刚刚接触javascript的人来说大部分都在使用面向过程型的编程方式。
例如:在一个页面中有一个按钮,<input name='mybutton' type='button' value='click' />
如果使用script对其操作,就要在这个按钮上添加一个onclick事件,在对应这个事件script实现。例如:
function myOnclick(){
alert('hello javascript!!');
}
也许有人说这样的javascript编程已经足够了,没错,对于web1.0的编程来说,这样的确是足够了,但是现在已经步入web2.0的年代,尤其使用ext之后,对象化javascript是必不可少的。
我现在就举例说明一下为什么要使用这种编程方式。
对于一个了解ext的人都知道,ext中带有一个panel组件,它有一个属性叫autoLoad。
可以通过这个属性加载另一个html或者是jsp,php,asp等等页面。那么在加载后的页面中可以包含javascript代码,但是这个javascript代码相当于集成到原有的页面中,那么这个页面的变量名是不能重复的。
例如:在a.html中有一个panel,它加载了b.html。如果在a页面和b页面中都存在一个函数refresh函数。那么系统在执行时就会出错,因为浏览器不知道该执行哪个页面中的refresh函数。但是如果采用对象化的编程就可以避免这个问题的出现。
对于ext的对象化编程非常简单。
比如a.html是我web程序的主页面,那么我对其的ext编程应该如下:
//开始建立主程序模块************************************************************************
webApp.app = function (tbar){
this.tbar = tbar;
this.init();
}
Ext.extend(webApp.app,Ext.util.Observable,{
//应用的初始化函数
init:function(){
//创建app主程序面板
this.body = new Ext.Panel({
id:'ext-mainpanel',
border:true,
region:'center',
margins:'5 5 5 5',
tbar: this.tbar,//加载实例化时传进来的tbar对象。
html:'<iframe name="main" scrolling="auto" frameborder="0" width="100%" height="100%" src="com-welcomePage.html"></iframe>'
});
//开始创建视图布局
var veiwport = new Ext.Viewport({
layout:'border',
border:false,
items:[this.body]
});
}
})
//实例化主程序类
Ext.onReady(function(){
tbarObject = [
{
text:'组织结构管理',
menu:[
{
text: '部门管理' ,
href:'com-departPage2.html',
hrefTarget : 'main'
},{
text: '人员管理',
href:'com-EmpManagePage2.html',
hrefTarget : 'main'
}
]
},'-',{
text:'权限管理'
}
];
var myApp = new webApp.app(tbarObject);
});
这是一个简单的对象化实例。
让ext项目步入对象化编程
最新推荐文章于 2024-09-12 12:36:01 发布