Results 1 to 6 of 6

Thread: Optimizing performance

  1. #1
    Sencha User
    Join Date
    Jul 2015
    Posts
    11

    Default Answered: Optimizing performance

    Hi,

    I've got an application that is heavy on field usage. I noticed that adding new fields can be fairly expensive, even when using suspend/resumelayouts. Observing the timeline in Chrome, I can see quite a lot of recalculation of styles and forced layouts (seems like one per fields).
    To make things simpler, my question is if the code below can be somehow optimized in any way. Right now pressing the button takes roughly ~2 seconds in Chrome and almost 4 in IE11.
    Note that the fields must be rendered dynamically. I'm using ExtJS 4.1.

    Code:
    util = {
        createTextField: function(myItemId) {
        return Ext.create('Ext.form.field.Text', {
            fieldLabel: 'Task' + myItemId + ':',
            name: 'task',
            itemId: myItemId,
            autofocus: true,
            enableKeyEvents: true,
            labelAlign: 'left',
            labelWidth: 50,
            labelStyle: 'font-size: 16px;',
            width: 500
        });
    }
    }
    
    
    
    
    Ext.onReady(function() {
    
    
        Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function() {
                for(i=0; i<100; i++)
                {
                    Ext.suspendLayouts();
                    formPanel.add(util.createTextField(i));
                    Ext.resumeLayouts(true);
                }
            }
        });
    
    
        var formPanel = Ext.create('Ext.form.Panel', {
            frame: true,
            title: 'Form Fields',
            width: 340,
            height: 600,
            bodyPadding: 5,
            autoScroll: true,
    
    
            fieldDefaults: {
                labelAlign: 'left',
                labelWidth: 90
            }});
    
    
    
    
        formPanel.render('form-ct');
    
    
    });

  2. Your suspendLayouts() and resumeLayouts() call are within the for loop. Try putting them outside of the for loop. That is,
    Code:
     Ext.suspendLayouts();
    for(i=0; i<100; i++)
                {
                    formPanel.add(util.createTextField(i));
                }
     Ext.resumeLayouts(true);
    Not sure how much difference that will make as rendering 100 text boxes will take time regardless.

  3. #2
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    Your suspendLayouts() and resumeLayouts() call are within the for loop. Try putting them outside of the for loop. That is,
    Code:
     Ext.suspendLayouts();
    for(i=0; i<100; i++)
                {
                    formPanel.add(util.createTextField(i));
                }
     Ext.resumeLayouts(true);
    Not sure how much difference that will make as rendering 100 text boxes will take time regardless.

  4. #3
    Sencha User
    Join Date
    Jul 2015
    Posts
    11

    Default

    Right, sorry, that was just a bug in my sample code. In my application they're outside the loop.
    Unfortunately in my app the resumeLayouts is causing multiple forced layouts and style recalculations. Not sure why.

  5. #4
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    So are you saying that even by putting them outside the for loop doesn't help performance?

  6. #5
    Sencha User
    Join Date
    Jul 2015
    Posts
    11

    Default

    It does, it just invalidates my sample code as it no longer represents the problem.
    What I'm seeing in my app, if I look at the Chrome timeline feature, are multiple calls to "Recalculate Style" and "Layout" all triggered by a single call to resumeLayouts. It looks like it's iterating over all the controls and calling "getWidth" which is what forces the layout.

  7. #6
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    I see. You may want to create a separate thread with a working fiddle which mimics the problem in your app as closely as possible. A live working example will definitely help to pin point the problem better.Try removing some of the configs in your textfield to see if any of them is causing an issue. Try using a container instead of a form panel to host the textfields although I doubt that would be of much help.

Similar Threads

  1. Great article for tips on optimizing performance on the iPhone and iPad
    By gpenston in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 6 Mar 2013, 6:19 AM
  2. Optimizing Sencha application and increasing the performance of overall site
    By kmayank in forum Sencha Touch 2.x: Discussion
    Replies: 8
    Last Post: 13 Aug 2012, 10:03 AM
  3. Optimizing Map Performance
    By bwags in forum Sencha Touch 2.x: Discussion
    Replies: 3
    Last Post: 9 Jul 2012, 10:59 AM
  4. optimizing performance carousel
    By kortovos in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 4 Nov 2010, 11:55 PM
  5. Optimizing css
    By ldorr in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 19 Nov 2009, 7:27 PM

Tags for this Thread

Posting Permissions

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