`
laitaogood
  • 浏览: 106351 次
  • 性别: Icon_minigender_1
  • 来自: 豫章郡→紫禁城
社区版块
存档分类
最新评论

Ext中继承的用法

阅读更多
在使用Ext的时候,我们有时候可能不用Ext自带的一些类,而是自己去创建一个自己定义的类。Ext很好的提供了这种方便。那就是在写JS文件的时候自己使用Ext.extend();来完成。
    完整的解释是如下:Ext.extend(Object subClass,Object supperClass,[Orrider ]);其中subClass是我们所写的子类,supperClass是我们要继承的类。方括号中的是可选的继承的方法或数据。譬如说我们要实现一个新型窗口,称为MyWindow。举例如下:
第一步先定义:
MyWindow = function(){
	this.feedUrl = new Ext.form.ComboBox({
		id:’test’,
		store:new Ext.data.SimpleStore({
	field:[‘url’,’text’],
	data:this.defaultData
});
});

this.form = new Ext.FormPanel({
	items:this.feedUrl,
	……
});

//以下是该子类的构造器
MyWindow.supperclass.constructor.call(this,{
	title:’Add News’,
	id:’news’,
	……
	buttons:[{
	text:’OK’,
	handler:this.onAdd,
	scope:this
},{	text:’CANCEL’,
	handler:this.hide.createDelegate(this,[])
}],
items:this.form
});
this.addEvents({add:true});
}

第二步定义继承的方法及覆盖或新定义的方法和数据:
Ext.extend(MyWindow,Ext.Window,{
	//数据的定义
defaultData:[
	[‘www.baidu.com’,’百度’],
	[‘http://www.google.com’,’谷歌’]
],
……
//方法的定义
onAdd: function() {
        this.el.mask('Validating Feed...', 'x-mask-loading');
        var url = this.feedUrl.getValue();
        Ext.Ajax.request({
            url: 'feed-proxy.php',
            params: {feed: url},
            success: this.validateFeed,
            failure: this.markInvalid,
            scope: this,
            feedUrl: url
        	});
        }
        ……
});


这样一来,我们就完成了一个新的自定义的子类。可以应用到我们的项目里了。
在AJAX应用中,如何实现面向对象的观点是非常重要的。由于AJAX的异步特性(我们也就是看中了它的这个特性)以及在开发JS代码时它带来的结构繁杂都是我们应该注意的,这种结构注定了AJAX的应用是极难维护的,因而我们想如何才能让JS也具有面向对象的观点,从而便于维护和理解。譬如像Ext,很多人在应用的时候是直接把所有的JS代码全部写在一个JS文件里,有的甚至是直接写在页面里。试想当浏览器加载这几百K的代码时是多么的缓慢,如果是并发访问量很大的门户或者社区类网站呢?结果可想而知。更不必说安全性了。因而我认为,实现JS代码的对象化不仅可以使项目结构清晰、美观,而且易维护和移植。所以我们可以利用Ext里的继承来实现这一想法。譬如我们可以把一系列联系极为密切的应用封装在一个JS文件里,直接的体现是这样的,当你点击一个按钮,这个按钮触发了一个动作,这个动作加载要实现的JS文件,然后直接new一个我们需要的部件,譬如form,关闭时再清空form里的数据并隐藏这个form。这样仅在需要时才加载的方式可以大大提高系统效率,防止系统资源的浪费。毕竟,每次都渲染一个部件是很浪费资源的。
分享到:
评论
4 楼 laitaogood 2012-09-07  
zyshaw 写道
supperclass. 多写一个p,害我考过去调了好久..

哈哈,不好意思哈
3 楼 zyshaw 2012-09-06  
supperclass. 多写一个p,害我考过去调了好久..
2 楼 laitaogood 2008-10-21  
czpae86 写道



呵呵,谢谢,小弟水平有限,欢迎常来
1 楼 czpae86 2008-10-21  

相关推荐

    Ext官方中文教程(可打包下载)

    Ext中的继承 Ext的类设计 Ajax通讯 JSON处理方法 函数的原型扩展 组件的使用: Tab标签页 Ext 1.x中的布局 Grid组件初学 Grid的数据分页 Ext菜单器件 表单组件初学 表单组件初学(二) Cookie的存储 Ext Grid+...

    Ext继承--Ext自定义组件的书写方式

    目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...

    Ext 学习中文手册

    EXT中的继承 71 补充资料 73 Ext 2 概述 73 组件模型 Component Model 74 容器模型Container Model 78 布局 Layouts 80 Grid 82 XTemplate 83 DataView 84 其它新组件 84 EXT2简介 85 下载Ext 85 开始! 85 ...

    EXT是一款强大的AJAX框架

    要使用这个CRUD面板,需要继承实现它,我们举一个例子 //继承CrudPanel,创建污水厂管理面板 AddPlantPanel=Ext.extend(Mis.Ext.CrudPanel,{ id:"AddPlantPanel",//id号是表示一个面板的唯一标志 title:"污水厂管理...

    EXT 中文帮助手册

    将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式...使用构造器函数 66 方法共享 66 表单组件入门 67 表单体 67 创建表单字段 67 完成表单 68 下一步 69 为一个表单填充或...

    Ext+JS高级程序设计.rar

    8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备...

    EXT 中文手册

    将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式...使用构造器函数 66 方法共享 66 表单组件入门 67 表单体 67 创建表单字段 67 完成表单 68 下一步 69 为一个表单填充或...

    EXT简体中文参考手册(PDF&CHM电子档)

    EXT中的继承 71 补充资料 73 Ext 2 概述 73 组件模型 Component Model 74 容器模型Container Model 78 布局 Layouts 80 Grid 82 XTemplate 83 DataView 84 其它新组件 84 EXT2简介 85 下载Ext 85 开始! 85 Element...

    Ext Js权威指南(.zip.001

    6.1.8 ext.domquery的使用方法 / 249 6.1.9 ext js选择器的总结 / 252 6.2 获取单一元素:ext.dom.element / 252 6.2.1 从错误开始 / 252 6.2.2 使用ext.get获取元素 / 253 6.2.3 使用ext.fly获取元素 / 256 ...

    精通JS脚本之ExtJS框架.part1.rar

    6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小/定位”方法 6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 ...

    ext_sti:通过关联继承扩展 Ruby on Rails STI

    外部STI 通过关联使用继承扩展 STI。用法宝石档案: gem 'ext_sti', :git => 'git://github.com/fuCtor/ext_sti.git'楷模: class Post < ActiveRecord xss=removed> PostType, :foreign_key => :post_type_id, :...

    jQuery继承extend用法详解

    本文实例为大家jQuery继承extend用法,供大家参考,具体内容如下 js代码 //直接基于jQuery的扩展,判断是否为空 $.isBlank = function(obj){ return(typeof(obj)=='undefined'||obj==''||obj==null); } //直接...

    PHP类继承 extends使用介绍

    出来工作这么久了,项目经验倒是不少,但是当问及底层的东西时候,常常是一言不发了。现在项目设计底层的东西越来越少,可以说是真正用到的也就是那么一点,真正核心的东西...被继承的方法和属性可以通过用同样的名字重

    精通JS脚本之ExtJS框架.part2.rar

    6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小/定位”方法 6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 ...

    ExtAspNet_v2.3.2_dll

    -修正DatePicker中的一个bug(31/01/2010将会返回NULL)使用DateFormatString来生成SelectedDate属性(feedback:OktaEndy)。 -修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则...

    day020-继承加强和设计模式代码和笔记.rar

    static是为了在静态方法中可以返回当前类中的对象 final:可加可不加,加了可以保证不可修改,且提供获取效率 3. 提供一个public修饰的方法getInstance给外部返回一个对象 4. 单例模式...

    Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

    TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...

    ExtJS4中文教程2 开发笔记 chm

    JQuery中getJSON的使用方法 Jquery中显示隐藏的实现代码分析 JQuery全选功能的实现 JQuery特效——下拉菜单 JQuery系列教程之XPath选择符 JQuery系列教程之选择符 JQuery自动缩放页面中的图片 JQuery获取浏览器的...

    基于ExtJs在页面上window再调用Window的事件处理方法

    今天在开发Ext的过程中遇到了一个恶心的问题,就是在ext.window页面,点击再次弹出window时,gridpanel中的store数据加载异常,不能正常被加载,会出现缓存,出现该问题,是因为window窗口弹出时,两个window同时...

    讲解JavaScript的面向对象的编程

    1. 下载解压之后,首先打开Contructor and object used.html文档,使用IE运行之后,查看原代码,代码中一行注释一行代码说明了this与prototype关键在使用function数据类型来定义JavaScript类的成员变量和普通方法的...

Global site tag (gtag.js) - Google Analytics