Component Life Cycle

In general, the Component architecture in 2.0 will "just work." It's been designed to handle most of the management of components transparently to the end developer. However, there will come a time when something needs to be customized, or a Component needs to be extended. That's when a thorough understanding of the Component life cycle will become quite helpful. Following are the most important stages in the life cycle of every class based on Component:

Initialization
  1. The config object is applied
    Classes that extend Component do not need to (and usually should not) provide a separate constructor. Component's constructor will not only apply any config passed into its subclasses, it also provides all of the following steps.
  2. The base Component events are created
    These are events that can be fired by any Component, and they are enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, destroy (see the Component API docs for complete details).
  3. The component is registered in ComponentMgr
    As such it will always be available via Ext.getCmp.
  4. The initComponent method is called
    This is the most important initialization step for subclasses, as this is a template method intended to be implemented by each subclass to provide any needed constructor logic. The class being created is called first, and each class in the hierarchy back up to Component is expected to call superclass.initComponent. This method makes it easy to implement and, if needed, override the constructor logic at any step in the hierarchy.
  5. Plugins are loaded (if applicable)
    If this Component has any plugins specified in the config, they will be initialized at this time.
  6. State is initialized (if applicable)
    If the Component is state-aware, its state will be reloaded if available.
  7. The component is rendered (if applicable)
    The component is rendered immediately if either renderTo or applyTo is provided in the config, otherwise rendering is deferred until the Component is explicitly displayed in code or is told to render by its container.
Rendering
  1. The beforerender event is fired
    This is a cancelable event, giving any handler the ability to prevent the Component from rendering if needed.
  2. The container is set
    If no container is specified, the parent node of the Component's underlying DOM element is set as the container.
  3. The onRender method is called
    This is the most important rendering step for subclasses, as this is a template method intended to be implemented by each subclass to provide the needed rendering logic. The class being created is called first, and each class in the hierarchy back up to Component is expected to call superclass.onRender. This method makes it easy to implement and, if needed, override the rendering logic at any step in the hierarchy.
  4. The Component is "unhidden"
    By default, many components are hidden using special CSS classes like "x-hidden". If the autoShow config value is true, any "hide" classes are removed from the component at this time.
  5. Custom class and/or style applied
    All Component subclasses support the special config properties of cls and style which are a custom, user-defined CSS class and rule respectively that will be applied to the DOM element underlying this Component. Specifying the cls value is the preferred method for visually customizing a Component and its constituent parts. Since the class will get applied to the topmost wrapper element of the Component's markup, any sub-elements of the Component can be adjusted using standard CSS inheritance rules.
  6. The render event is fired
    This is a notification that the Component has been successfully rendered at this point. You can safely assume that its DOM elements are now available to your code if needed. If you attempt to access a Component prior to rendering, it won't be available and you'll get an error.
  7. The afterRender method is called
    This is another template method for subclasses that can be implemented or overridden to provide any special post-rendering logic that may be needed. Each subclass is expected to call superclass.afterRender.
  8. The Component is hidden and/or disabled (if applicable)
    The hidden and disabled config values are applied at this point.
  9. Any state-specific events are initialized (if applicable)
    State-aware Components can declare special events that are specific to loading and saving state. If supplied, any such events will be added.
Destruction
  1. The beforedestroy event is fired
    This is a cancelable event, giving any handler the ability to prevent the Component from being destroyed if needed.
  2. The beforeDestroy method is called
    This is another template method that can be implemented or overridden to provide any special pre-destruction logic that may be needed. Each subclass is expected to call superclass.beforeDestroy.
  3. Element and its listeners are removed
    If the Component has been rendered, its underlying Element's event listeners are removed and the Element itself is then removed from the DOM.
  4. The onDestroy method is called
    This is another template method that can be implemented or overridden to provide any special post-destruction logic that may be needed. Each subclass is expected to call superclass.onDestroy. Note that the Container class (and any Container subclasses) provides a default implementation of onDestroy that automatically loops through its items collection and calls destroy on each child Component recursively.
  5. Component is unregistered from ComponentMgr
    It will no longer be available via Ext.getCmp.
  6. The destroy event is fired
    This is simply a notification that the Component has been successfully destroyed at this point and is no longer available in the DOM.
  7. Event listeners on the Component are removed
    The Component itself can have event listeners separately from its underlying Element. If any exist, they are removed.
신고

'Programming > ExtJS' 카테고리의 다른 글

Extjs Life Cycle  (0) 2009.03.16
ExtJS Link  (0) 2009.01.28
ExtJs and Flash  (0) 2009.01.28
by Hazard 2009.03.16 08:46
http://extjs.com/
http://blog.extjs.eu/know-how/events-explained/
신고

'Programming > ExtJS' 카테고리의 다른 글

Extjs Life Cycle  (0) 2009.03.16
ExtJS Link  (0) 2009.01.28
ExtJs and Flash  (0) 2009.01.28
by Hazard 2009.01.28 11:09

웹 페이지를 만들다보면 레이어드 팝업에 대한 고민을 한번쯤 하게된다.

그냥 팝업으로 구현 할것인가? 레이어드 팝업으로 뺄것인가?
더군다나 ExtJS 같은 UI Framework 도입 이전의 과도기 라면 더더욱 구현하기 애매할 것이다.
... ...
두가지 모두 구현해본 결과 결론은 UI Framework 도입 이전 이라도 부분적으로 UI Framework 의 힘들 빌리는것이
좀더 구현하기 수월하다는 것이다.

그만큼 구조화된 레이어드 팝업을 새로 구현하는것은 쉽지 않은 일이다.

잘 정의된 레이어드 팝업이 포함해야할 기능은 아래와 같다.
1. Resizable
2. Flsah 탑재가능
3. Event Driven

ExtJS 를 이용해 이러한 기능을 만족시키는 코드는 아래와 같다.
Ext.ux.FlashPlugin = function() {
    this.init = function(ct) {
        ct.flashTemplate = new Ext.XTemplate(
            '<div>',
            '<object id="flash-{id}" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="{swfWidth}" height="{swfHeight}">',
            '<param name="movie" value="{swf}" />',
            '<param name="quality" value="high" />',
            '<param name="wmode" value="transparent" />',
            '<param name="flashvars" value="{computedflashvars}" />',
            '<param name="allowScriptAccess" value="domain" />',
            '<param name="align" value="t" />',
            '<param name="salign" value="TL" />',
            '<param name="swliveconnect" value="true" />',
            '<param name="scale" value="showall" />',
            '<embed name="flash-{id}" src="{swf}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="{computedflashvars}" type="application/x-shockwave-flash" width="{swfWidth}" height="{swfHeight}" wmode="transparent" allowScriptAccess="always" swliveconnect="true" align="t" salign="TL" scale="showall"></embed>',
            '</object>',
            '</div>'
        );
        ct.flashTemplate.compile();
        ct.renderFlash = function() {
            if (this.flashvars && (typeof this.flashvars == 'object')) {
                var tempflashvars = Ext.apply({}, this.flashvars);
                for (var key in tempflashvars) {
                    if (typeof tempflashvars[key] == 'function') {
                        tempflashvars[key] = tempflashvars[key].call(this, true);
                    }
                };
                this.computedflashvars = Ext.urlEncode(tempflashvars);
            }
            this.swfHeight = this.body.getSize().height -2;
            this.swfWidth = this.body.getSize().width -2;
            if (this.body.first()) this.flashTemplate.overwrite(this.body.first(),this);
            else this.flashTemplate.insertFirst(this.body,this);
        };
        ct.loadFlash = function(config) {
            Ext.apply(this,config);
            this.renderFlash();
        };
        ct.on('afterlayout',ct.renderFlash, ct);
    };
};

그리고 사용법은 아래와 같다.

function start()
{

    var form = new Ext.Panel({
            layout: 'fit',
            height:240,
            width: 405,
            swf: ' ',
            flashvars: {data: '', height: 100, width: 100 },
            plugins: new Ext.ux.FlashPlugin(),
            region:'north' });

    form.on('resize', function(Panel, w, h)
    {
   form.swf = '';
           
 }
    );
   
    var window = new Ext.Window({
        title: 'Resize Me',
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:1px;',
        buttonAlign:'center'

      
    });
    window.add( form ); 
    window.show();
   
   
}

위의 예제는 아래와 같이 동작한다.
1. 레이어드 팝업에 flash 를 plugin 을 이용하지 않고 붙여넣었다.
2. resize 될때마다 event 를 받아서 flash도 resize 한다.

이와같은 코드는 fusion chart 처럼 flash 기반의 chart lib를 사용할때 유용하다.
fusion chart 는 resize 될때마다 flash를 다시 load 해야하므로
위 예제의
form.on('resize', function(Panel, w, h) 
{
   form.swf = ''; 
 }
부분에서 flash 에 넘겨주는 사이즈를 조절하게 하면 된다.

-hazard-


신고

'Programming > ExtJS' 카테고리의 다른 글

Extjs Life Cycle  (0) 2009.03.16
ExtJS Link  (0) 2009.01.28
ExtJs and Flash  (0) 2009.01.28
by Hazard 2009.01.28 11:07
| 1 |

티스토리 툴바