Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    96
    Vote Rating
    0
    draduc is on a distinguished road

      0  

    Post [DEFER] Gridpanel body size incorrect on render within a tabpanel (FF 3.x)

    [DEFER] Gridpanel body size incorrect on render within a tabpanel (FF 3.x)


    Ext version tested:
    • Ext 3.2.1

    Adapter used:
    • ext

    css used:
    • only default ext-all.css



    Browser versions tested against:
    • FF3.x
    • FF3.6.8 (firebug 1.5.4 installed)

    Operating System:
    • Windows 7 Proffesional

    Description:
    • On render, gridpanel body height is 0. This happens when the gridpanel is part of a tabpanel. First layout solves the issue. The problem can be seen in the attached test case upon adding a gridpanel via the dedicated button. The problem only manifests itself in Firefox (3.x , haven't tested 2.x).

    Test Case:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <!-- CSS -->
            <link type='text/css' rel='stylesheet' href='../_common/lib/3.2.1/resources/css/ext-all.css'/>
            <!-- JS -->
            <script type='text/javascript' src='../_common/lib/3.2.1/adapter/ext/ext-base-debug.js'></script>
            <script type='text/javascript' src='../_common/lib/3.2.1/ext-all-debug.js'></script>
            <!-- JS config -->
            <script type="text/javascript">
                Ext.ns('Test');
                Ext.ns('Test.app');
                Test.app.app = new Ext.extend(Ext.util.Observable,{
                    constructor:function(){
                        Test.app.app.superclass.constructor.apply(this,arguments);
                        if(Ext.isReady) this.init();
                        else Ext.onReady(this.init,this);
    
                    },
                    init:function(){
                        Ext.QuickTips.init();
                        this.winId = Ext.id(null,'test-comp-');
                        this.data = [];
                        var win;
                        win = new Ext.Window({
                            width:800,
                            height:600,
                            id:this.winId,
                            layout:'border',
                            defaults:{
                                border:false
                            },
                            items:[
                                {
                                    region:'west',
                                    tbar:{
                                        items:[
                                            {
                                                text:'Add grid',
                                                scope:this,
                                                handler:this.handleAddGrid
                                            },
                                            '-',
                                            {
                                                text:'Add panel',
                                                scope:this,
                                                handler:this.handleAddPanel
                                            }
                                        ]
                                    },
                                    split:true,
                                    collapseMode:'mini',
                                    width:200,
                                    title:'West',
                                    style:{
                                        borderRight:'1px solid #8DB2E3'
                                    }
                                },
                                {
                                    region:'center',
                                    itemId:'tabs',
                                    xtype:'tabpanel',
                                    style:{
                                        borderLeft:'1px solid #8DB2E3'
                                    }
                                }
                            ]
                        });
                        win.show();
                    },
                    handleAddGrid:function(){
                        var tabs,store,gp;
                        tabs = Ext.getCmp(this.winId).get('tabs');
                        store = new Ext.data.Store({
                            data:{
                                'success':true,
                                'data':this.data
                            },
                            reader:new Ext.data.JsonReader(
                                {
                                    successProperty:'success',
                                    idProperty:'id',
                                    root:'data'
                                },
                                [
                                    { name:'id',type:'int' },
                                    { name:'label',type:'string' }
                                ]
                            )
                        });
                        gp = tabs.add({
                            xtype:'editorgrid',
                            store:store,
                            cm:new Ext.grid.ColumnModel({
                                columns:[
                                    {
                                        header:'Label',
                                        dataIndex:'label'
                                    }
                                ]
                            }),
                            bbar:new Ext.PagingToolbar({
                                store: store,       // grid and PagingToolbar using same store
                                displayInfo: true,
                                pageSize: 25
                            }),
                            title:Ext.id()
                        });
                        tabs.setActiveTab(gp);
                    },
                    handleAddPanel:function(){
                        var tabs,p;
                        tabs = Ext.getCmp(this.winId).get('tabs');
                        p = tabs.add({
                            xtype:'panel',
                            layout:'fit',
                            items:[
                                {
                                    xtype:'panel',
                                    border:false,
                                    bbar:{
                                        items:[
                                            {
                                                text:'Test'
                                            }
                                        ]
                                    }
                                }
                            ],
                            title:Ext.id()
                        });
                        tabs.setActiveTab(p);
                    }
                });
                new Test.app.app();
            </script>
            <!-- JS app -->
            <title>Full anchor layout</title>
        </head>
        <body></body>
    </html>
    Steps to reproduce the problem:
    • Add a gridpanel via the dedicated button placed in the west panel toolbar.

    The result that was expected:
    • the gridpanel renders to fit the tabpanel body dimensions (body height != 0)
    • expected behavior can be seen in Chrome 4.x+ or IE 8.x

    The result that occurs instead:
    • the gridpanel renders with a body height of 37px.
    • height is corrected automatically upon first layout.

    Screenshot or Video:
    • gridonrender.png - screenshot with the grid as it looks at the beginning of the Ext.grid.GridPanel afterrender method (line 43200 in ext-all-debug.js, version 3.2.1)
    • gridafterlayout.png - screenshot with the grid as it looks after it lays out

    Debugging already done:
    • none

    Possible fix:
    • not provided
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,999
    Vote Rating
    649
    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


    Have you tried it with the SVN build? I just ran your test case and it rendered to the appropriate size.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    96
    Vote Rating
    0
    draduc is on a distinguished road

      0  

    Default


    Yep, just grabbed the latest build from SVN (3.3+), it's the same thing.

    Maybe i wasn't clear enough in the bug report ... in the end, the grid look fine and dandy. It's just that on render it's height is waaay smaller than that of the container. This is resolved when the grid reaches its first layout call, the height is recalculated and the body element is given an appropriate height. The bug itself is a short flicker of the component on render...you can see it best if the grid has a bbar attached to it. For a split second the bbar appear at the top of the component, right below the toolbat / header. Immediately after that, it's pushed to the bottom of the component by the body element as it receives the proper height...

    I'll try to capture it on video, i think it can best be observer that way.

    As i said in the initial post, the problem only manifests itself in Firefox.

    thanks!

  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    I'm not sure there is a good solution to the flicker here without affecting performance negatively. This is something that was attempted in 3.1.x and the performance penalty was too large. The upcoming changes to the layout system may help somewhat with this, and we're open to suggestions.

Similar Threads

  1. Replies: 2
    Last Post: 19 Apr 2009, 8:08 AM
  2. 2.1, GridPanel incorrect height in TabPanel with fit layout
    By sanderson in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 21 May 2008, 9:10 AM
  3. [2.0rc1] Window shadow has an incorrect size
    By ruxproject in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 21 Nov 2007, 1:18 AM

Thread Participants: 2

Tags for this Thread