PDA

View Full Version : [CLOSED] Chrome renders Panels inconsistently (and wrong sometimes)



KallDrexx
10 Nov 2010, 5:40 PM
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:
https://dl.dropbox.com/u/6753359/ExtPanelGood.png

However, if I hit refresh once or twice, it reloads like this
https://dl.dropbox.com/u/6753359/ExtPanelBad.png

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
10 Nov 2010, 10:27 PM
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
10 Nov 2010, 11:09 PM
@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
11 Nov 2010, 12:48 AM
The question is why wrap a TreePanel in a Panel in the first place?

KallDrexx
11 Nov 2010, 5:16 AM
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 (http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/) 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
11 Nov 2010, 5:24 AM
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
11 Nov 2010, 5:41 AM
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
11 Nov 2010, 5:41 AM
tbar?

KallDrexx
11 Nov 2010, 5:44 AM
tbar?

Didn't notice that was a property! Thanks!

KallDrexx
17 Nov 2010, 8:22 PM
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:
http://dl.dropbox.com/u/6753359/ext2good.png

The other half the time I press F5 I get the other result
http://dl.dropbox.com/u/6753359/ext2bad.png

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?

emilschutte
17 Nov 2010, 8:38 PM
Have you tried explicitly emptying the cache (CTRL+SHIFT+DEL)?

Mjollnir26
18 Nov 2010, 6:53 AM
Does the following work?

I removed the extend because i remember i had problems with extending an viewport once. Never
managed to get that working. All other Ext.extends work great tough.

Also i removed some unneccessary xtypes etc.

Oh and the renderTo and show stuff was kicked out too you don't need that in a Viewport



Ext.BLANK_IMAGE_URL = '/Content/ext/images/default/s.gif';

Ext.onReady(function()
{
var vp = new Ext.Viewport
({
layout:'border',
items:
[
{
region: 'north',
tbar:
[
{
text:'Settings'
}
]
},
{
region: 'center',
collapseMode: 'standard',
xtype: 'tabpanel',
activeTab: 0,
items: [{title: 'tab1' }]
},
{
title: 'Sidebar',
region: 'west',
width: 100,
collapsible: true,
autoWidth: true
}
]
});
});

KallDrexx
18 Nov 2010, 2:57 PM
Nope, I copied and pasted your code, after 2 refreshes Chrome rendered this:
http://dl.dropbox.com/u/6753359/ext3bad.png

Notice the tab panel on the very far right as well. Also, I still get the white space shown in my previous post on some refreshes.

Mjollnir26
19 Nov 2010, 12:24 AM
Hmmm i am on 3.2.2 here tested in FF 3.6._current and Chrome 7.0 on Windows 7 Ultimate.

To test i simple replaced the onReady call of my real app with the code from my post above.
And i can not for the Life of me replicate the issue, in no Browser.
I hit the Refresh button in Chrome with and without Ctrl for like 20 times.

Your best bet would probably be to try without your custom CSS you might have and quadruple checking if no Extensions / overrides / custom components are interfering.

KallDrexx
19 Nov 2010, 4:41 PM
Aha!

At first I was disappointed in your reply, because I'm not using any custom CSS. But then it got me thinking and I figured it out!

The issue all along was that my HTML file had the ext-all.css stylesheet <link> tag AFTER all the <script> tags. It turns out that the Ext stylesheet was being loaded AFTER the javascript was processed. That explains the inconsistency as well, and it seems to not happen anymore.

Sorry for the stupidity all, and thanks for all the help!

Mjollnir26
20 Nov 2010, 6:16 AM
Glad you Figured it out. Don't get scared by the starting issues. If you manage to work through those youll Be rewarded with gerat Productivity once you learn how to Fully leverage the Power of the framework.