Ext JS 4 Component Lifecycle

by amoiseev

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-gray.css">

JavaScript

Ext.define('Window', {
    extend: 'Ext.window.Window',
    title: 'Window',
    width: 250,
    height: 100,

    listeners: {
        // render events
        beforerender: function() {
            console.log('EVENT beforerender');
        },

        render: function() {
            console.log('EVENT render');
        },

        afterrender: function() {
            console.log('EVENT afterrender');
        },

        // activate events
        beforeactivate: function() {
            console.log('EVENT beforeactivate');
        },

        activate: function() {
            console.log('EVENT activate');
        },

        beforedeactivate: function() {
            console.log('EVENT beforedeactivate');
        },

        deactivate: function() {
            console.log('EVENT deactivate');
        },

        // show events
        beforeshow: function() {
            console.log('EVENT beforeshow');
        },

        show: function() {
            console.log('EVENT show');
        },

        // hide events
        beforehide: function() {
            console.log('EVENT beforehide');
        },

        hide: function() {
            console.log('EVENT hide');
        },

        // destroy events
        beforedestroy: function() {
            console.log('EVENT beforedestroy');
        },

        destroy: function() {
            console.log('EVENT destroy');
        }
    },

    // Template methods

    constructor: function() {
        console.log('TMP   constructor');
        this.callParent(arguments);
    },

    initComponent: function() {
        console.log('TMP   initComponent');
        this.callParent(arguments);
    },

    afterRender: function() {
        console.log('TMP   afterRender');
        this.callParent(arguments);
    },

    onRender: function() {
        console.log('TMP   onRender');
        this.callParent(arguments);
    },

    beforeComponentLayout: function() {
        console.log('TMP   beforeComponentLayout');
...