Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    85
    Vote Rating
    1
    KallDrexx is on a distinguished road

      0  

    Default [CLOSED] Chrome renders Panels inconsistently (and wrong sometimes)

    [CLOSED] Chrome renders Panels inconsistently (and wrong sometimes)


    I am trying to create my GUI in Extjs, using the border layout demo as an example. So far I have a border layout with a toolbar in the north section, collapsible panel on the west, and a TabPanel in the center. This works correctly in IE8, but half of the time I hit the refresh button the layout does not render the center component.

    When I refresh the panel, sometimes it renders correctly, like so:


    However, if I hit refresh once or twice, it reloads like this


    The code I am using to create my panel is:
    Code:
    MyApp.BaseLayout = Ext.extend(Ext.Viewport, {
            initComponent: function () {
                var config = {
                    layout: 'border',
                    items: 
                    [
                        {
                            xtype: 'MyAppDocumentToolbar',
                            region: 'north'
                        }, 
                        {
                            xtype: 'MyAppObjectPanel',
                            region: 'west'
                        }, 
                        new Ext.TabPanel({
                            region: 'center',
                            activeTab: 0,
                            items: [{
                                title: 'Tab 1',
                                html: 'Blah blah blah'
                            }, {
                                title: 'Tab 2',
                                html: 'Tab 2 blah'
                            }]
                        })
                    ]
                };
                Ext.apply(this, Ext.apply(this.initialConfig, config));
    
                MyApp.BaseLayout.superclass.initComponent.apply(this, arguments);
            } //end initComponent
    
        });
        Ext.reg('MyAppBaseLayout', MyApp.BaseLayout);
    
        MyApp.DocumentToolbar = Ext.extend(Ext.Toolbar, {
            initComponent:function() {
                var config = {
                    height: 25,
                    items: 
                    [{
                        text: 'Button w/ Menu'
                    }]
                };
                Ext.apply(this, Ext.apply(this.initialConfig, config));
    
                MyApp.DocumentToolbar.superclass.initComponent.apply(this,arguments);
            }//end initComponent
        });
        Ext.reg('MyAppDocumentToolbar',MyApp.DocumentToolbar);
    
        MyApp.ObjectPanel = Ext.extend(Ext.Panel, {
            initComponent: function () {
                var config = {
                    title: 'Test',
                    split: true,
                    width: 150,
                    minSize: 175,
                    maxSize: 400,
                    collapsible: true,
                    margins: '0 0 0 5',
                    frame: true,
                    items:
                    [
                        new Ext.tree.TreePanel({
                            title: 'blah'
                        })
                    ]
                };
                Ext.apply(this, Ext.apply(this.initialConfig, config));
    
                MyApp.ObjectPanel.superclass.initComponent.apply(this, arguments);
            } //end initComponent
        });
        Ext.reg('MyAppObjectPanel', MyApp.ObjectPanel);

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why is everything an extend? Why don't you just configure an instance of what you want? I'd bet that's your problem,

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    @Animal: Learn to live with it. This is the kind of code that the Designer generates.

    @KallDrexx: I tested your example in Chrome and I'm not seeing any problems.

    ps. Do you really want MyApp.ObjectPanel to be frame:true? Also, MyApp.ObjectPanel is missing a layout ('fit'?).

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The question is why wrap a TreePanel in a Panel in the first place?

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    85
    Vote Rating
    1
    KallDrexx is on a distinguished road

      0  

    Default


    Thanks for the replies all,

    Quote Originally Posted by Animal View Post
    Why is everything an extend? Why don't you just configure an instance of what you want? I'd bet that's your problem,
    I"m following the design in outlined by Saki in his Writing a Big Application page. Since my RIA is going to be pretty complex I'm following that page as it's the only tutorial I could find that shows how to organize a complex Ext project.

    Quote Originally Posted by Condor
    @Animal: Learn to live with it. This is the kind of code that the Designer generates.

    @KallDrexx: I tested your example in Chrome and I'm not seeing any problems.

    ps. Do you really want MyApp.ObjectPanel to be frame:true? Also, MyApp.ObjectPanel is missing a layout ('fit'?).
    I'm actually not using the designer. I figured I wanted to figure out how to work with Ext code before I start relying on pre-generated code, so I could (theoretically) have a better understanding of everything.

    Not sure why you aren't seeing it on Chrome, I can reproduce it locally pretty reliably though with the latest Ext and latest Chrome. That's annoying. This code also loads instantly on IE 8, but it actually takes a good 5 or so seconds to become functional in Chrome for me, components slowly load in.

    I'm not sure if I really want it to be frame:true, I'm not even totally sure what it does even after reading the Api and I saw it on panel examples I was trying to mimic. I'll try after work to see if getting rid of the frame and/or adding a layout helps the issue (didn't realize Panels needed a layout).

    Quote Originally Posted by Animal
    The question is why wrap a TreePanel in a Panel in the first place?
    Because I'm a newbie who didn't look at a TreePanel enough to see that it extends Panel. I want to add a toolbar above the tree, and none of the examples show adding other components inside of a TreePanel, so I wasn't sure this was possible.

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    1. Are you sure you are not getting a javascript error in Chrome (open the javascript console)?
    2. Are you using a Ext.state.Manager? In that case, try clearing your path cookie.
    3. Are you including any css besides ext-all.css?

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    85
    Vote Rating
    1
    KallDrexx is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    1. Are you sure you are not getting a javascript error in Chrome (open the javascript console)?
    2. Are you using a Ext.state.Manager? In that case, try clearing your path cookie.
    3. Are you including any css besides ext-all.css?
    1. I remember looking at the console and not seeing any errors, but I'll reverify when i get home.
    2. No i'm not using the state manager, never even heard of it until just now
    3. Only using ext-all.css, no other css files.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    tbar?

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Posts
    85
    Vote Rating
    1
    KallDrexx is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    tbar?
    Didn't notice that was a property! Thanks!

  10. #10
    Sencha User
    Join Date
    Nov 2010
    Posts
    85
    Vote Rating
    1
    KallDrexx is on a distinguished road

      0  

    Default


    I still cannot get anything to work consistently in chrome. I got this code almost completely based on code exported from the designer:

    Code:
        Ext.BLANK_IMAGE_URL = '/Content/ext/images/default/s.gif';
    
        Ext.onReady(function () {
            var blah = new BaseLayoutUi({
                renderTo: Ext.getBody()
            });
            blah.show();
        });
    
        BaseLayoutUi = Ext.extend(Ext.Viewport, {
            layout: 'border',
            initComponent: function () {
                this.items = [
                {
                    xtype: 'panel',
                    region: 'north',
                    tbar: {
                        xtype: 'toolbar',
                        items: [
                            {
                                xtype: 'button',
                                text: 'Settings'
                            }
                        ]
                    }
                },
                {
                    region: 'center',
                    collapseMode: 'standard',
                    xtype: 'tabpanel',
                    activeTab: 0,
                    items: [{title: 'tab1' }]
                },
                {
                    xtype: 'panel',
                    title: 'Sidebar',
                    region: 'west',
                    width: 100,
                    collapsible: true,
                    autoWidth: true
                }
            ];
                BaseLayoutUi.superclass.initComponent.call(this);
            }
        });
    Half the time I refresh I get the correct result:


    The other half the time I press F5 I get the other result


    This is in chrome 7.0.517.44, Ext Js 3.3.0, both using ext-all-debug.js and ext-all.js.

    Why am I completely unable to get even the most basic layout working correctly?

Similar Threads

  1. Replies: 2
    Last Post: 26 Oct 2010, 12:20 AM
  2. Replies: 5
    Last Post: 2 Dec 2009, 12:36 AM
  3. [CLOSED] Window:onEsc working inconsistently in FF3
    By lexaux in forum Ext GWT: Bugs (2.x)
    Replies: 1
    Last Post: 20 Nov 2009, 7:33 AM
  4. Replies: 2
    Last Post: 7 Feb 2009, 10:50 AM
  5. [2.0.1][CLOSED] wrong render with many panels ...
    By njeudy in forum Ext 2.x: Bugs
    Replies: 1
    Last Post: 26 Jan 2008, 5:53 AM

Thread Participants: 4

Tags for this Thread