Results 1 to 10 of 10

Thread: Performance problem with VBox Panel, child panels and viewModel

  1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    44

    Exclamation Answered: Performance problem with VBox Panel, child panels and viewModel

    I have some performance problem with my code. Basically, we have some kind of 'Layer Manager' where a user can add/remove/save/modify/drag.

    Visually, we use a VBox and we add panels for each layers with Combos/Textfield/etc. A user can configure up to 35-40 layers. Im using a xtype: panel for these, I tried with an xtype: dataview. Performance is of course better but we require so much tools like combos, textfield, timefield, etc that its impossible to use with a tpl I think. I really liked the ViewModel approach to handle these fields also so I decided to use that.

    Once we hit like 15-20 child panels items in our panel, every add is subsequently slower and freeze the interface for a while.

    I tried adding Ext.suspendLayouts() and Ext.resumeLayouts() before and after adding my panel but it doesn't matter, seems like every panel layout is updated each add. Setting suspendLayout: true to panels already renderer didn't seem to help either.

    Also tried to remove my viewModel just in case, its faster but we lose alot of functionality with binding + when we hit like 40-50 layers it starts to get slow anyway...

    Here is my code if you wanna try it :

    https://fiddle.sencha.com/#fiddle/1b8a

    Click on add, try to scroll the panel, interface kinda freezes. The more you add, the worse it gets. Spamming add button is even worse.

    Anyone can help me improve performance on rendering those? Thanks!

  2. No, the Fiddle.view.item.Item doesn't get any flex value set. There isn't one at:

    Code:
            itemPanel.add({
                xtype: 'item',
                viewModel: {
                    data: {
                        name: Ext.String.format('Layer test_{0}', ++Ext.idSeed),
                        id: Ext.idSeed
                    }
                }
            });
    Also, your Fiddle.view.item.Item isn't using a layout which is overnesting. It serves no purpose to nest a panel within a panel when the parent panel doesn't do anything.

  3. #2
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    44

    Default

    any idea anyone? :/

  4. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    I see a pretty big performance improvement when "Ext.suspendLayouts()" and "Ext.resumeLayouts(true)" is used. I think that's the best you can do.

  5. #4
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    44

    Default

    Quote Originally Posted by hakimio View Post
    I see a pretty big performance improvement when "Ext.suspendLayouts()" and "Ext.resumeLayouts(true)" is used. I think that's the best you can do.
    Where did you add those?

    In onAddClick? I dont see a big diff.. I added

    Code:
    onAddClick: function() {
            Ext.suspendLayouts();
            var itemPanel = this.getView().child('[xtype=itemPanel]');
            itemPanel.add({
                xtype: 'item',
                viewModel: {
                    data: {
                        name: Ext.String.format('Layer test_{0}', ++Ext.idSeed),
                        id: Ext.idSeed
                    }
                }
            });
            Ext.resumeLayouts(true);
        }
    Just mash the Add button and you'll feel the rendering.

  6. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    suspending and resuming layouts should be used when doing multiple add/removes. If you are only calling add or remove once, there will be no improvements (they actually call suspend/resumeLayout internally).

    Usually, poor performance comes from needing to do multiple layout calculations due to auto-sizing. If you let components auto-size, they have to be rendered and then sizes calculate. If a child forces a parent to resize, a complete layout calculation has to be done over.

    Some ways around this is using align : 'stretch' and using the flex or height/width configs on direct children.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #6
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    44

    Default

    Quote Originally Posted by mitchellsimoens View Post
    suspending and resuming layouts should be used when doing multiple add/removes. If you are only calling add or remove once, there will be no improvements (they actually call suspend/resumeLayout internally).

    Usually, poor performance comes from needing to do multiple layout calculations due to auto-sizing. If you let components auto-size, they have to be rendered and then sizes calculate. If a child forces a parent to resize, a complete layout calculation has to be done over.

    Some ways around this is using align : 'stretch' and using the flex or height/width configs on direct children.
    Yeah thats what I tho for suspend/resumeLayout. My problem is literally adding 1 panel feels like it freezes/chokes the browser longer and longer the more panel we add.

    Im using stretch and flex wherever I can in my Fiddle, maybe I missed 4-5 components but I dont think it will improve the overall performance drastically.

  8. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,449
    Answers
    3997

    Default

    No, the Fiddle.view.item.Item doesn't get any flex value set. There isn't one at:

    Code:
            itemPanel.add({
                xtype: 'item',
                viewModel: {
                    data: {
                        name: Ext.String.format('Layer test_{0}', ++Ext.idSeed),
                        id: Ext.idSeed
                    }
                }
            });
    Also, your Fiddle.view.item.Item isn't using a layout which is overnesting. It serves no purpose to nest a panel within a panel when the parent panel doesn't do anything.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  9. #8
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    44

    Default

    Quote Originally Posted by mitchellsimoens View Post
    No, the Fiddle.view.item.Item doesn't get any flex value set. There isn't one at:

    Code:
            itemPanel.add({
                xtype: 'item',
                viewModel: {
                    data: {
                        name: Ext.String.format('Layer test_{0}', ++Ext.idSeed),
                        id: Ext.idSeed
                    }
                }
            });
    Also, your Fiddle.view.item.Item isn't using a layout which is overnesting. It serves no purpose to nest a panel within a panel when the parent panel doesn't do anything.
    You are right, this panel was causing the slowness since it was auto... thanks! Much better now that I set a layout.

    Also, I was overnesting in my fiddle but in my app my Item is much more complicated so, it was a leftover.

  10. #9
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250
    Answers
    758

    Default

    Another thing would be to swap out panels for containers if you're not using any panel features.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  11. #10
    Sencha Premium Member
    Join Date
    Dec 2011
    Posts
    44

    Default

    Quote Originally Posted by evant View Post
    Another thing would be to swap out panels for containers if you're not using any panel features.
    I'll try that.

Similar Threads

  1. [OPEN] Child viewModel saves undeclared bind attributes on root viewmodel
    By robboerman in forum Ext JS 6.x Bugs
    Replies: 3
    Last Post: 12 Sep 2017, 2:31 AM
  2. Replies: 1
    Last Post: 23 Jan 2013, 10:13 AM
  3. Replies: 2
    Last Post: 4 Jun 2012, 5:26 PM
  4. Help! vbox parent container with formpanel and panel child items
    By thebread in forum Sencha Touch 2.x: Q&A
    Replies: 11
    Last Post: 28 Feb 2012, 12:33 AM
  5. [2.2] Panel's Child Panels Not Resizing Properly - IE 7
    By carl23934 in forum Ext 2.x: Help & Discussion
    Replies: 18
    Last Post: 3 Nov 2008, 12:48 AM

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
  •