Results 1 to 2 of 2

Thread: Toolbar bug when extending panel in 4.1.3

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    Jun 2011
    Vote Rating

    Default Toolbar bug when extending panel in 4.1.3

    REQUIRED INFORMATIONExt version tested:
    • Ext 4.1.3
    Browser versions tested against:
    • Chrome 23.0.1271.64
    • IE9
    DOCTYPE tested against:
    • HTML 5
    • 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 ]
        afterRender: 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 ]
    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
    Attached Images Attached Images

  2. #2
    Sencha User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia
    Vote Rating


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

    Marking as closed.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts