Results 1 to 3 of 3

Thread: 3.1.1: Any way to avoid getStyle()? Firefox is unusable slow!

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    58

    Default 3.1.1: Any way to avoid getStyle()? Firefox is unusable slow!

    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?

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    What does your code look like? If you have deep nesting, then layout calculations will mean a lot of calls to getStyle.

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    58

    Default

    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:

    HTML Code:
    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:

    HTML Code:
    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).

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •