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

[KallDrexx]

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:

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);

[Animal]

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

[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'?).

[Animal]

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

[KallDrexx]

Thanks for the replies all,

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.

@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).

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.

[Condor]

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?

[KallDrexx]

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.

[Animal]

tbar?

[KallDrexx]

tbar?

Didn't notice that was a property! Thanks!

[KallDrexx]

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

    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?