Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-3283 in 4.1.0 Sprint 1.
  1. #11
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
    blakel is on a distinguished road

      0  

    Default


    Did this get an internal issue #?

  2. #12
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
    blakel is on a distinguished road

      0  

    Default


    Bump.

  3. #13
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
    blakel is on a distinguished road

      0  

    Default


    Has anyone else run these examples? Did you experience a slowdown?

  4. #14
    Sencha User
    Join Date
    May 2011
    Posts
    92
    Vote Rating
    0
    ext-spring-mvc is on a distinguished road

      0  

    Default


    Quote Originally Posted by blakel View Post
    Has anyone else run these examples? Did you experience a slowdown?
    you are not alone, I am also experiencing poor performance. switch time dependents on the target tab, how many components and how complexity the layout it is.

  5. #15
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    198
    Vote Rating
    1
    Nickname is on a distinguished road

      0  

    Default


    Hi,

    I'm not affected by this at the moment, but I had a look into this.
    I'm not using the jquery adapter, rather than ext-base.js (add my changed sources later).

    The loadtime of both versions feels the same.
    The Ext.3.4 Version seems to have a layout problem or whatever (no floating toolbar, panel with forms visible only after first click).

    But then I started clicking though the tabs. The feeling, between my finger click down the mouse button and the tab is going active is long. Checked against the 3.4 version and I didn't had this impression.
    Now I needed to have a deeper look and used chrome speedtracer. The event running times are higher, which could confirm the longer duration to activate a tab.

    This are not really arguments to confirm that this is a bug. Its more a additional description for sencha devs.


    So here are some screenshots:

    - how does it look after first load with 3.4
    view-3.4.jpg
    - how does it look after first load with 4.0.2a
    view-4.0.2a.jpg
    - speedtracer loading time 3.4
    speedtracer-3.4-ext-base-adapter_load.jpg
    - speedtracer loading time 4.0.2a
    speedtracer-4.0.2a_load.png
    - speedtracer click 1 to 10 - 3.4
    speedtrace-3.4.0_click-1to10.jpg
    Last edited by Nickname; 22 Jun 2011 at 6:11 AM. Reason: forum software is super!

  6. #16
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    198
    Vote Rating
    1
    Nickname is on a distinguished road

      0  

    Default


    - speedtracer click 1 to 10 - 4.0.2a
    speedtrace-4.0.2a_click-1to10.jpg

    Sources

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
      <
    title>Sectioned Panel Test</title>

        <
    link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
     
        <
    script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
        
        
        <script type="text/javascript">
        //<![CDATA[
        Ext.onReady(function() {
            
            var itemNumber = 0;
            var createItems = function() {
                var items = [];
                for (var i = 0; i < 5; i++) {
                    items.push({
                        xtype: 'textfield',
                        fieldLabel: 'Text ' + itemNumber++
                    });
                }
                return items;
            };
            
            var panels = [];
            
            for (var i = 0; i < 100; i++) {
                panels.push({
                    title: 'Panel ' + i,
                    layout: 'form',
                    autoHeight: true,
                    items: createItems()
                });
            }

            var panel = new Ext.TabPanel({
                title: 'Sectioned Panel Test',
                width: 900,
                renderTo: Ext.getBody(),
                items: panels
            });
        });
        
        //]]>
        </script>
        
    </head>
    <body>
    </body>
    </html> 

    And for Extjs4:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
      <
    title>Tab Panel Test</title>
        
        <
    link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css" />
        <
    script type="text/javascript" src="ext-4.0.2a/ext-all.js"></script>

        
        <script type="text/javascript">
        //<![CDATA[
        Ext.onReady(function() {
            
            var itemNumber = 0;
            var createItems = function() {
                var items = [];
                for (var i = 0; i < 5; i++) {
                    items.push({
                        xtype: 'textfield',
                        fieldLabel: 'Text ' + itemNumber++
                    });
                }
                return items;
            };
            
            var panels = [];
            
            for (var i = 0; i < 100; i++) {
                panels.push({
                    title: 'Panel ' + i,
                    items: createItems()
                });
            }

            var panel = new Ext.tab.Panel({
                title: 'Sectioned Panel Test',
                width: 900,
                renderTo: Ext.getBody(),
                items: panels
            });
        });
        
        //]]>
        </script>
        
    </head>
    <body>
    </body>
    </html> 


    Sorry for two posts. This forum SW is driving me nuts. Could not upload all images in one set. And later could not add a single image.

    Hope, everything is in order and readable

  7. #17
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
    blakel is on a distinguished road

      0  

    Default


    Yes, the slowness is not as apparent in newer browser versions (although there is still a noticeable delay in them that wasn't there in 3.4).

    However if you run the 4.0.2 example in IE8 the tab panel becomes effectively unusable for any consumer product (ie. consumers of products written using ExtJS 4) where IE8 is a large percentage of the install base.

  8. #18
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Is it tab switching which is slow?

  9. #19
    Ext JS Premium Member
    Join Date
    Jan 2009
    Posts
    31
    Vote Rating
    1
    blakel is on a distinguished road

      0  

    Default


    Yes tab switching is slow, but also render time is very slow in certain browsers.

    In 3.4 when you click a tab the tab gets the visual highlight immediately and the corresponding panel is immediately shown. In 4.0.2 there is a delay updating the visual indication of what tab is active as well as showing the corresponding panel.

    In IE8 there is also a very big difference in page render time. From the time you refresh the page to the time the page is render and able to be interacted with is about 8 seconds in my tests with IE8. In 3.4 this load time is only about 2 seconds. These tests were done from a local web server so there is no network delay affecting the results.

  10. #20
    Ext JS Premium Member
    Join Date
    Sep 2009
    Location
    Arlington, VA
    Posts
    33
    Vote Rating
    3
    drogers is on a distinguished road

      0  

    Default


    I'm seeing a slow down as well. I have added blakel's tests to my web server. Chrome and Firefox are mostly passable although it feels a bit sluggish. IE (6,7,8) is fine in the 3.4.0 version but it lags in the 4.0.2a version.
    Debug versions:
    A cursory glance at the code shows that Ext 4 is using buttons for the tabs and I think Ext 3 used list items. It looks like every time the tab is switched in Ext 4 all of the tab buttons are going through a layout cycle. Then again I'm no expert so it could be something else.