App.SuperPanel = Ext.extend(Ext.Panel, {
    // initComponent вызывается у всех компонентов, которые видны
    // если надо расширить какой-то store - юзай constructor вместо initComponent
    //
    // initComponent вызывается до того, как элемент начинает рендериться на странице
    // но после того, как отшуршал конструктор, потому все параметры, которые ты отдал
    // при инициализации уже применены к объекту и есть в this, но при этом ничего не вызывалось
    // следовательно они ни на что еще не успели повлиять
    initComponent: function(){
        // applyIf применяет только если параметры не переданы
        Ext.applyIf(this, {
            title: 'defaultTitle',
            html: 'defaultHtml',
            buttons: [{
                text: 'defaultButton',
                handler: function(){
                    console.log('default handler');
                    console.log(this);
                    console.log(this.ownerCt);
                }
            }]
        });
        // apply применяет полюбому и перетирает то, что отдано при инициализации
        // apply лучше юзать ПОСЛЕ applyIf, чтоб он перетер все ненужное
        Ext.apply(this, {
            closable: true
        })
        // парентовый initComponent. опять же, если будешь экстендить какой-то store, то
        // надо будет вызывать {ObjectName}.superclass.constructor.call(this)
        App.SuperPanel.superclass.initComponent.call(this);
    }
});

// defaults
new App.SuperPanel({});

new App.SuperPanel({
    title: 'title changed'
});

new App.SuperPanel({
    html: 'html changed'
});

new App.SuperPanel({
    buttons: [{
        text: 'button changed'
    }]
});

new App.SuperPanel({
    title: 'everything changed, except closable',
    html:  'everything changed, except closable',
    closable: false,
    buttons: [{
        text:  'everything changed, except closable'
    }]
});