自已扩展EXT组件(Extending Ext Components)-阿里云开发者社区

开发者社区> ap0581w9c> 正文

自已扩展EXT组件(Extending Ext Components)

简介: 自已扩展EXT组件 From Learn About the Ext JavaScript Library Jump to: navigation, search Summary: Gives an overview on how to extend Components ...
+关注继续查看

自已扩展EXT组件

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Gives an overview on how to extend Components in Ext and provides links to the many great articles that have been written on the subject by Ext community members
Author: Patrick Donelan
Published: 2008-04-16
Ext Version: 2.0
Languages: en.pngEnglish

Contents

[hide]

img_d05563fa34a9855c9c94ef41225fc3ec.png Introduction

In the beginning there was Ext.extend() and it was good. Ext.extend() lets you build powerful object-oriented class hierarchies in javascript. You can use it to build your own base classes and derived classes, and also to extend Ext's built-in classes. If you are not familiar with Ext.extend() you should start by reading Manual:Intro:Inheritance.

Jozef Sakalos' Tutorial:Extending_Ext_Class gives a great step-by-step account of how to use the Ext 1.x approach to inheritance. It is well worth a read as the define-your-own-constructor approach still works in Ext 2.x and you will no doubt encounter pre-2.x code that uses this approach.

img_d05563fa34a9855c9c94ef41225fc3ec.png Ext.Component

Most Ext widgets (Form elements, Panels, Toolbars, ..) inherit from Ext.Component (and those that don't will in Ext 3).

img_d05563fa34a9855c9c94ef41225fc3ec.png Pre-configured Classes

The simplest way you can extend Ext.Component (or any class that inherits from it) is to do what you would have already done in Ext 1.x and use Ext.extend() (as per Jozef's tutorial above). The difference though, is that you do not need to define your own constructor (this is handled by the initComponent() function which is covered later in this article). If all you want to do is define a few of your own defaults as a re-usable class (referred to here and elsewhere in the ExtJS community as a Pre-configured Class), all you have to do is:


MyComponent = Ext.Ext.., 
    myDefault1: ,
    myDefault2: 
;
 

Ext., MyComponent;

In the example above the object literal that you pass as the second argument to Ext.extend() would contain your overwritten defaults for the config options that Ext.some.component already supports.

The above example is deceptively simple but allows you to refactor large chunks of repetitive code out of your application into re-usable objects. For example, you can then create instances of Ext.some.component with your pre-configured config options via:

 myComponent =  MyComponent;

Or lazily via the Component XType you registered, e.g. in a list of Panel items via:

..
   :  xtype:  
..

img_d05563fa34a9855c9c94ef41225fc3ec.png Extending Ext.Component

Ok, so Pre-configured Classes are useful, but so far we haven't added any extra capabilities to the classes we are inheriting from. To do that we need to override some inherited methods. This is where Ext 2.x really starts to shine.

Ext.Component existed in 1.x but in 2.x it was further expanded and improved upon, making it one of the most fundamental classes in the overall architecture. Component now provides a unified model for component creation, rendering, event handling, state management and destruction, and every component in Ext that requires these features now extends Component. Ext_2_Overview#Component_Model.

You should study the above linked Ext_2_Overview well as this document isn't much more than an elaboration on what that article lays out. You'll find that if you open up the source code for Ext.Component (it's the file called Component.js in the widgets sub-folder of the ExtJS src folder - refer to my Ext Source Overview article if you're not sure how) the code can be followed line-by-line along with the corresponding step-by-step explanation of the Component Life Cycle, Ext_2_Overview#Rendering and Ext_2_Overview#Destruction. Really eye-opening stuff if you want to start grokking how Ext works under the hood!

Now, since this article is about extending Ext.Component, the primary method you want to focus on extending is initComponent() which takes a starring role in the Component Life Cycle. After you have mastered initComponent() you can move on to other important methods such as onRender() which lets you extend Ext_2_Overview#Rendering, onDestroy() for component Ext_2_Overview#Destruction etc.. Rather than re-hashing what has been written elsewhere, at this point I'll just point you at some of the great resources that have been written by other Ext community members.

Jozef Sakalos' Tutorial:Writing_a_Big_Application_in_Ext gives a great step-by-step tutorial on using the new Component inheritance model and why it's undoubtedly a good thing for any non-trivial application.

Also by Jozef Sakalos, Tutorial:Extending_Ext2_Class also provides a great real-world example to work through (mjlecomte's forum post provides a more heavily-commented version of the same code).

img_d05563fa34a9855c9c94ef41225fc3ec.png A Re-usable Template

The following is a template (based on the template posted by Jozef Sakalos in mjlecomte's forum post) that you can use as a starting-point when extending Ext.Component classes

MyComponent = Ext.Ext.., 
    
    propA: ,
 
    initComponent: 
        
 
        
        
        
        Ext., 
            propA: 
        ;
 
        
 
        
        MyComponent..., arguments;
 
        
        
    ,
 
    
    onRender: 
 
        
 
        
        MyScope..., arguments;
 
        
 
    
;
 

Ext., MyComponent;

As an enlightening example, if you used the above class via either of the following:

 myComponent =  MyComponent
    propA: 
;

..
  : xtype: , propA: 
..

then the property propA would have been set three times, to the values 1, 2, and 3 respectively. If you follow the code (and the comments) through you will see that value starts as 1 (Constructor Default) and then is set to 2 by the user's config object, and finally is overridden in initComponent and set to 3. Hopefully this example gives you a bit of insight into the order in which the code is executed (not in the order that you read it from start to finish!).

Because components nest other components, here's a quick way to grab the top-most component.

 topCmp = oo.o=o.  o;,;

img_d05563fa34a9855c9c94ef41225fc3ec.png Closing Remarks

This article focuses primarily on the initComponent() method and its role in the Component Life Cycle. Once you get the hang of that you should start exploring the other aspects of the Ext Component model (managed rendering, state mangement, plugins, etc.) listed in Ext_2_Overview#Component_Model.

Big thanks to Jozef Sakalos who posted all the great tutorials and forum posts on this topic, and of course to Jack and the team for giving us such an awesome framework to build on. Can't wait to see what they come up with in Ext 3!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何使用 Arthas 定位 Spring Boot 接口超时
公司有个渠道系统,专门对接三方渠道使用,没有什么业务逻辑,主要是转换报文和参数校验之类的工作,起着一个承上启下的作用。
3 0
Spring Cloud 终于大改版?为什么要用日期来做版本号?
Spring Cloud终于改了 最近Spring Cloud把版本号从A到Z的伦敦地铁站,改为以日期命名了。
5 0
Jar 包依赖冲突排查思路和解决方法
起因 应用从 jdk7 升级到 jdk8,终于可以用上新特性的语法进行代码编写,通过几轮开发、测试和验证后,在上
6 0
新来的妹纸问我 AJAX 请求为什么不安全?我没有回答出来。。。
开篇三问 AJAX请求真的不安全么? AJAX请求哪里不安全?
9 0
【深入浅出版】Java全套学习路线规划及配套视频和笔记
 工作难找,入坑不易,请根据自己的情况再做决定,且行且珍惜!        大家都说近两年疫情导致行情不太好,确实比起往年工作机会是少了很多,但我觉得事事是相对的。我入坑比较早,好几年了,各种各样的人和事都遇到过,也面试过很多人!
8 0
9 个爱不释手的 JSON 工具
众所周知,JSON让开发人员易于使用,又让机器易于解析和生成。 JSON吸引了工具构建者的注意,它们开发了用于重新格式化、验证和解析JSON的众多工具,这不足为奇。这些工具既有在Web浏览器中运行的在线实用程序,又有面向代码编辑器和IDE的插件,比如Visual Studio Code和Eclipse。
6 0
HTML5 画布|学习笔记
快速学习 HTML5 画布
6 0
HTML5地理定位|学习笔记
快速学习HTML5地理定位
4 0
+关注
579
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载