PDA

View Full Version : 3.1.1: Any way to avoid getStyle()? Firefox is unusable slow!



Max_nl
22 Feb 2010, 7:51 PM
I know there is already a thread about this issue in the premium forum ( http://www.extjs.com/forum/showthread.php?t=88479 ), but I do not have access there, so am starting a new topic here.


It currently takes almost 9 seconds to display a simple window with a lot of checkboxes on Firefox.
My computer may not be the world's fastest (dualcore Atom), but I still expect it to be faster than that.
Especially when it shows up fast under Chrome.


I cannot post the entire code here at this time, but to get an idea what my Window looks like: http://bayimg.com/image/lakgbaacm.jpg

The checkbox panel is created using a simple xtemplate.
I also tried using checkboxgroups instead, but that was even slower.

Firebug profiling: http://bayimg.com/image/makgfaacm.jpg
getStyle() getWidth() and getHeight() are taking more than a second each to complete.

Is there an easy way to avoid that those are being called?
My window and its components cannot be resized by the user. So is there any way to pre-compute the widths, heights and styles?

Would using absolute positioning help?

Animal
23 Feb 2010, 12:16 AM
What does your code look like? If you have deep nesting, then layout calculations will mean a lot of calls to getStyle.

Max_nl
23 Feb 2010, 5:59 AM
Ext.ux.wiz (tabpanel based) with 2 cards in it.
Commenting out the second card does only make a minor difference, so it's the first that is the problem.
Also tried a normal tabpanel, and that shaves a few seconds loading time off, but it is still way too slow to be usable.

The card is split in two using hbox layout. Form to the left, grid to the right:



var cfg = {
items: [
this.form,
{
xtype: 'fieldset',
title: 'Beschikbare namen',
items: this.grid,
flex: 1,
layout: 'fit'
}
],
layout: {
type: 'hbox',
defaultMargins: '0 10 10 10',
align: 'stretch'
}
};


The form is just a Formpanel with a couple fieldsets, and my checkbox thingy:



items: [{
xtype: 'fieldset',
title: 'Gewenste namen',

items:
[{
xtype: 'textarea',
name: 'names',
fieldLabel: 'Gewenste domeinnamen',
anchor: '100%'
},{
xtype: 'button',
fieldLabel: ' ', labelSeparator: '',
iconCls: 'silk-zoom',
text: 'Controleer beschikbaarheid',
handler: this.onCheck,
scope: this
}]
},{
xtype: 'fieldset',
title: 'TLDs',
autoScroll: true,
anchor: '100% 70%',

items:
{
xtype: 'tldbox'
}
}],
flex: 1


Tldbox is just a subclass of Panel with its html property set to the raw html in initComponent (xtemplate generated).
Cannot show a complete example, as it is dependent on our webserver (to fetch a list of tlds).