Toolbar bug when extending panel in 4.1.3

[James.M.Bailey]

REQUIRED INFORMATIONExt version tested:

• Ext 4.1.3

Browser versions tested against:

• Chrome 23.0.1271.64
• IE9

DOCTYPE tested against:

• HTML 5

Description:

• Toolbars docked to left or right when used in an extended class, such as Ext.Panel, render incorrectly (top and bottom as well, but less noticeable). All other children of the container are pushed down to the bottom.

Steps to reproduce the problem:

• Extend Ext.panel.Panel
• Apply a card layout
• Apply an Ext.Panel as an item with minor component (combobox) for good measure.
• Apply an lbar to the extended panel with a button (with or without button makes no difference, but children help visually)

The result that was expected:

• lbar should consume only the width required for its children

The result that occurs instead:

• All child items (non-toolbar) are pushed to the bottom of the container minus some small height
• The toolbar appears to fill from left to right as wel

Test Case:

    Ext.ux.PreferencesPanel = Ext.define('Ext.ux.PreferencesPanel', {    extend: 'Ext.panel.Panel',
    alias: 'widget.preferences',
    layout: { type: 'card', deferredRender: false},


    initComponent: function () {
        this.generalPrefs = Ext.create('Ext.form.Panel', {
            items: [
                {
                    xtype: 'combobox',
                    name: 'HomeTab',
                    editable: false,
                    fieldLabel: 'Home Tab',
                    store: [[0, 'Updates'], [1, 'My Profile'], [2, 'File Manager'], [3, 'Videos'], [4, 'Map']],
                    queryMode: 'local'
                }, {
                    xtype: 'combobox',
                    name: 'DefaultCommunityID',
                    editable: false,
                    fieldLabel: 'Default Community',
                    queryMode: 'local'
                }, {
                    xtype: 'checkbox',
                    name: 'CACEnforced',
                    hidden: false,
                    boxLabel: 'Enforce CAC authentication for login'
                }
            ]
        });


        Ext.apply(this, {
            lbar: [{ text: 'General'}],
            buttons: [
              { text: 'Submit' },
              { text: 'Cancel' }
            ],
            items: [ this.generalPrefs ]
        });


        this.callParent(arguments);
    },


    afterRender: function () {
    }
});


Ext.onReady(function(){
  var prefsPanel = Ext.create('Ext.ux.PreferencesPanel', {});


  Ext.create('Ext.window.Window', {
        title: 'My Preferences',
        layout: 'fit',
        closeAction: 'hide',
        modal: true,
        stateful: false,
        height: 400,
        width: 502,
        items: [ prefsPanel ]
    }).show();
});

HELPFUL INFORMATIONWe are transitioning a large application from 4.0.7 to 4.1.3Screenshot or Video:See this URL for live test case: http://Debugging already done:

• Tested using VS2010.
• Tested using Sencha Try 4.1.1
• Tested lbar (broken).
• Tested rbar (broken).
• Tested tbar (worked but something was off).
• Tested bbar (worked but something was off)
• Removing all items from lbar (no change).
• Creating instance of Ext.Panel rather than extending, which results in correct UI rendering.
• Extended Ext.Window, and created instance of Ext.Panel as item[], having the same UI as described above with card layout, panel child with children, and lbar with or without buttons in the parent panel, within the new window extension, which resulted in incorrect UI rendering

Possible fix:

• not provided

Additional CSS used:

• default ext-all.css
• toolbar-button-borders

Operating System:

• ________
• WinXP Pro

[evant]

In your code you override the afterRender method without ever calling the parent method, this is causing the issue.

Marking as closed.