Search code examples
formsextjsheaderextjs4render

ExtJS: Ext.form.Panel header goes missing when beforeRender event implemented

In ExtJS 4.2, whenever the "beforeRender" event is put into a Ext.form.Panel definition, and an instance of that definition is created, the header of the panel disappears. Is there a way I can override the framework functionality to make the header (containing my title label) show up? Not sure if this makes a difference, but I'm using "border" layout in my viewport.

Panel Header (with title) is missing:

Ext.define('App.view.module1.Activity1', {
    extend: 'Ext.form.Panel',
    xtype: 'view-module1-activity1',
    title: 'this header does not show up',
    beforeRender: function() {        
    },    
});

enter image description here

Panel Header (with title) shows up:

Ext.define('App.view.module1.Activity1', {
    extend: 'Ext.form.Panel',
    xtype: 'view-module1-activity1',
    title: 'this header does show up',    
    //beforeRender: function() {        
    //},    
});

enter image description here

I double checked if the header is there but just hidden or if it's not there at all. It's the latter. This is what the div looks like when the header is rendered. This HTML shows up under the actual view div tag. When the header is missing, due to having the "beforeRender" event, this HTML block does not show up at all.

<div class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top" id="view-module1-activity1-1046_header" style="right: auto; left: 0px; top: 0px; width: 803px;">
    <div id="view-module1-activity1-1046_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-box-layout-ct x-panel-header-body-default-horizontal x-panel-header-body-default-top x-panel-header-body-default-docked-top" style="width: 791px;">
        <div id="view-module1-activity1-1046_header-innerCt" class="x-box-inner " role="presentation" style="width: 791px; height: 16px;">
            <div id="view-module1-activity1-1046_header-targetEl" class="x-box-target" style="width: 791px;">

                <div class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default x-box-item x-component-default" unselectable="on" id="view-module1-activity1-1046_header_hd" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 791px;"><span id="view-module1-activity1-1046_header_hd-textEl" class="x-header-text x-panel-header-text x-panel-header-text-default" unselectable="on">this header does show up</span>
                </div>

            </div>
        </div>
    </div>
</div>
Solution

  • Two things. First, you have an extra comma after the function. Second, beforeRender needs to callParent()

    Ext.define('App.view.module1.Activity1', {
    extend: 'Ext.form.Panel',
    xtype: 'view-module1-activity1',
    title: 'this header does not show up',
    beforeRender: function () {
        // code
        this.callParent(arguments);
    }    
});