对于一些刚刚接触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可视化编程
ext项目实例源码
Ext项目Demo集合,包括Ext的布局,Ext的form示例,Ext的文件上传功能,你值得拥有
想学习ext面向对象编程的同仁可以仔细看下。
Ext实例项目 Ext实例项目 Ext实例项目 Ext实例项目 Ext实例项目
EXT4.0项目源码
ext 编程开发指南 无论你是 Ext 库的新手,抑或是想了解 Ext 的人,本篇文章的内容都适合你。本文将简单地介绍 Ext 的几个基本概念,和如何快速地做出一个动态的页面并运行起来,假设读者已具备了一些 JavaScript ...
Ext项目小框架介绍源码,欢迎使用下载,看看研究啊。
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...
Ext的面向对象实例: 1.命名空间 2.类实例属性 3.类实例方法 4.类静态方法 5.构造方法 6.类继承 7.类实例方法重写 8.命名空间别名 9.类别名 10.事件队列
简单的EXT项目代码,整合struts,对学习ext的整合的有帮助的
这是一个简单实用的Ext项目,里面涵盖了Ext的树形菜单,Ext与服务器的交互以及服务器返回客户端一个树形菜单的实现,还有Ext可以编辑的表格的制作代码等等,很有用哦!
Ext 中文 国际化文件Ext 中文 国际化文件
spring hibernate ext项目
《快意编程:Ext JS Web开发技术详解》首先对Ext JS进行了概述,然后通过一个简单的示例带领读者快速入门,在读者对Ext JS有了初步印象后,又重点介绍了JavaScript的面向对象技术、Ext JS API文档的使用方法、Ext JS...
NULL 博文链接:https://lionelxx777.iteye.com/blog/359860
Ext JS相关资源中文化Ext JS相关资源中文化Ext JS相关资源中文化
网上搜来的小项目,供自己学习ext。来自网络,回归网络。
EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT...