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
    Posts
    3
    Vote Rating
    0
    James.M.Bailey is on a distinguished road

      0  

    Default Toolbar bug when extending panel in 4.1.3

    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
    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:
    Code:
        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
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


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

    Marking as closed.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1