You found a bug! We've classified it as EXTJS-9331 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default [4.2.0] Ext.suspendLayouts causes a menu to be not rendered

    [4.2.0] Ext.suspendLayouts causes a menu to be not rendered


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.0 GA
    Browser versions tested against:
    • IE9
    • Chrome
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • An Ext.suspendLayouts call causes a menu to be not rendered. Please follow the test case.
    • Initially, suspending layouts is used to improve performance of the TreePanel to reduce the delay on node expanding. It is used with ExtJS 4.1, because it doesn't support buffered rendering for trees yet. But it somehow causes a context menu to be not rendered on some scenario (see the steps to reproduce). And it is reproducible with 4.2, so, I am reporting it. Maybe, it breaks the normal event flow, that is why it causing the problem, but there is, potentially, a problem with layouting.
    Steps to reproduce the problem:
    • Click the Load button
    • Right click on the node
    The result that was expected:
    • The context menu appears.
    • It does appears if do either:
      • Right click the node before clicking the Load button
      • Or remove suspendLayouts/resumeLayouts calls
      • Or replace them with, respectively, "this.suspendLayout = true;" and "this.suspendLayout = false; this.doLayout();" for the tree

    The result that occurs instead:
    • The context menu doesn't appear
    Test Case:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.suspendLayouts causes a menu to be not rendered</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
    
        <script src="../ext-all-debug.js"></script>
    
        <script>
            Ext.onReady(function () {
                Ext.create("Ext.button.Button", {
                    renderTo: Ext.getBody(),
                    text: "Load",
                    handler: function () {
                        Ext.getCmp("TreePanel1").setRootNode({
                            children: [{
                                text: 'new node'
                            }]
                        });
                    }
                });
    
                Ext.create("Ext.tree.Panel", {
                    id: "TreePanel1",
                    renderTo: Ext.getBody(),
                    height: 200,                
                    width: 200,
                    root: {
                        children: [{
                            text: "Initial node"
                        }]
                    },
                    rootVisible: false,
                    contextMenu: Ext.create("Ext.menu.Menu", {
                        items: [{
                            text: "Some item"
                        }]
                    }),
                    listeners: {
                        render: {
                            fn: function () {
                                this.mon(this.el, 'contextmenu', function (e) {
                                    e.stopEvent();
                                    this.contextMenu.showAt(e.getXY());
                                }, this);
                            }
                        },
                        beforeitemexpand: {
                            fn: function () {
                                Ext.suspendLayouts();
                            }
                        },
                        afteritemexpand: {
                            fn: function () {
                                Ext.resumeLayouts(true);
                            }
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,217
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,350
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    One of the less obvious interactions between layouts and components is that layouts are where rendering takes place for new children. Though perhaps there are better ways to do this, this has historically been the case.

    The practical effect of this in 4.1+ is that suspendLayouts then prevents this rendering by preventing (rather delaying) the layout. This is precisely why we were unable to auto-batch layouts. Changing this interaction would have profound effect on timing of events that would probably produce an enormous regression for people - my early Ext JS apps would often have logic in afterrender or afterlayout somewhat at random and it "just worked".

    I'm afraid this is one we cannot "fix" because the fix would require fully decoupling rendering from layout and that would be a next-generation kind of thing.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #4
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Don, thank you for the detailed answer. Fair enough.

    Well, probably, such problems can appear seldom, but, I think, this fact is very noteworthy to be in these guides
    http://docs.sencha.com/ext-js/4-2/#!/guide/performance
    http://www.sencha.com/blog/ext-js-4-1-performance
    http://www.sencha.com/blog/optimizin...d-applications

    Currently, I updated the performance guide and thread to warn the people.
    http://www.sencha.com/forum/showthre...565#post954140
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 2