You found a bug! We've classified it as EXTJS-7004 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    98
    Vote Rating
    5
    plleeuwm is on a distinguished road

      0  

    Default [4.1.*] Inconsistent layouts with docked items.

    [4.1.*] Inconsistent layouts with docked items.


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.1.*
    Description:
    • Panels with docked items lay out inconsistently depending if they have heights set or not.
    Test Case:
    Code:
    Ext.onReady(function() {    var store = Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer',
                    "email": "home@simpsons.com",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
        
        var createGrid = function(height) {
            return Ext.create('Ext.grid.Panel', {
                title: 'Simpsons with a height of : ' + height,
                height: height,
                store: store,
                dockedItems: Ext.create('Ext.grid.Panel', {
                    scroll: false,
                    store: store,
                    dock: 'right',
                    columns: [{
                        width: 100,
                        header: 'Name',
                        dataIndex: 'name'
                    }]
                }),
                columns: [{
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    header: 'Phone',
                    dataIndex: 'phone'
                }],
                renderTo: Ext.getBody()
            });
        };
        
        
        var height = createGrid(150), noHeight = createGrid();
    });

    Here is a screenshot of the code being run :

    Ext.Panel.jpg

  2. #2
    Sencha Premium Member MichaelOstrovsky's Avatar
    Join Date
    May 2008
    Location
    Tel Aviv, Israel
    Posts
    135
    Vote Rating
    6
    MichaelOstrovsky is on a distinguished road

      1  

    Default


    I found a temporary workaround - just set docked item's height manually after it's rendered.
    for example, here's a patch to fix panel/window header which height has been set directly in css :

    Code:
    /**
     * Correct header sizing
     */
    Ext.define('patches.PanelHeader', {
        override: 'Ext.panel.Panel',
        updateHeader: function(){
            this.callParent(arguments);
    
    
            if(this.header){
                this.header.on('render', function(header){
                    header.setHeight(header.getHeight());
                }, this);
            }
    
    
        }
    });

Thread Participants: 1