1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default Unanswered: Tab panel slow performance in samsung galaxy tab

    Unanswered: Tab panel slow performance in samsung galaxy tab


    Hi, I need to develop app for samsung galaxy tab. But I found that the tab panel performance extremely slow when switching the tab.

    Here is my code

    tabpanel.js
    Code:
    Ext.define('bluebutton.view.TabPanel', {    extend: 'Ext.TabPanel',
        xtype: 'tabpanel',
        requires: [
            'Ext.ux.OptimizedTab.OptimizedTab',
            'bluebutton.view.BlueButton.MemberMain',
            'bluebutton.view.BlueButton.TransactionMain',
            'bluebutton.view.BlueButton.CouponMain',
            'bluebutton.view.BlueButton.testing'
        ],
    
    
        config: {
    
    
            //Specify title here , cos navigation bar only take the title from child
            title: 'Blue Button',
            ui: 'mainTabBar',
            autoDestroy: true,
            tabBar: {
                docked: 'top',
    
    
                layout: {
                    pack: 'center'
                }
            },
            defaultType: 'optimized-tab',
            items: [
    
    
                    {
                        iconCls: 'add_black',
                        title: 'Loyalty Point',
                        items: [
    
    
                    	            {
    
    
                    	                xtype: 'loyaltycard',
                    	                height: '100%'
                    	                //style: 'background:#E7E7E7',
                    	            }
                    	        ]
    
    
    
    
                    },
    
    
                    {
                        iconCls: 'note1',
                        title: 'Transaction List',
    
    
                        items: [
    
    
                             {
                                 xtype: 'transactionmain',
                                 height: '100%'
    
    
                             }
                         ]
    
    
    
    
                    },
    
    
    //                {
    
    
    //                    iconCls: 'spaces2',
    //                    title: 'Coupon List',
    
    
    //                    items: [
    
    
    //                         {
    //                             xtype: 'couponmain',
    //                             height: '100%'
    
    
    //                         }
    //                     ]
    
    
    
    
    
    
    //                },
                     {
                         iconCls: 'team1',
                         title: 'Member List',
    
    
                         items: [
    
    
                               {
                                   xtype: 'membermain',
                                   height: '100%'
    
    
                               }
                           ]
    
    
    
    
                     },
    
    
                      {
                          iconCls: 'team1',
                          title: 'Testing1',
    
    
                          items: [
    
    
                               {
                                   xtype: 'memberlistcard',
                                   height: '100%'
    
    
                               }
                           ]
    
    
    
    
                           },
    
    
    
    
    
    
                            {
                                iconCls: 'team1',
                                title: 'Testing2',
    
    
                                items: [
    
    
                               {
                                   xtype: 'memberlistcard',
                                   height: '100%'
    
    
                               }
                           ]
    
    
    
    
                           },
    
    
    
    
    
    
                            {
                                iconCls: 'team1',
                                title: 'Testing3',
    
    
                                items: [
    
    
                               {
                                   xtype: 'memberlistcard',
                                   height: '100%'
    
    
                               }
                           ]
    
    
    
    
                           },
    
    
    
    
    
    
                  ]
        }
    });

    memberlist.js
    Code:
    Ext.define('bluebutton.view.BlueButton.MemberList', {    extend: 'Ext.List',
        xtype: 'memberlistcard',
        requires: [
            'Ext.field.Select',
            'Ext.field.Search',
            'bluebutton.view.BlueButton.MemberDetail',
             'Ext.plugin.ListPaging',
            'Ext.plugin.PullRefresh'
    
    
        ],
        config: {
          
    
    
            styleHtmlContent: true,
            scrollable: 'vertical',
            itemHeight :20,
            variableHeights : false,
              store : { xclass : 'bluebutton.store.BlueButton.MemberList'},
           grouped: true,
            indexBar: true,
             autoLoad: false,
           disclosure: true,
    
    
    
    
           plugins: [
                       
                            { xclass: 'Ext.plugin.PullRefresh',
                                    refreshFn: function() {             
                                    Ext.getStore('memberStore').load();
                                     },
                            }
                    ],
    
    
            id :'memberlist',
            items: [
                    
            
            ],
            emptyText: '<p class="no-search-results">No member record found matching that search</p>',
            itemTpl: Ext.create(
                'Ext.XTemplate',
                '<div class="tweet-wrapper">',
                    '<table>',
                        '<tr>',
                            '<td rowspan="2" width="28%" >',
    //                        '<div style="padding-left: 30px;">',
    //                        '   <img src="{imgUrl}" width="140" height="130" /></div>',
                            '</td>',
                            '<td>',
                            '   <div class="tweet">',
                            '       <h2>{memberId}</h2>',
                             '      <h3>Name: {name}</h3>',
                            '       <h3>Point Avalaible : {pointAvalaible} , Last Visited : {lastVisited}</h3>',
                            
                            '   </div>',
                            '</td>',
                        '</tr>',
                    '</table>',
                '</div>'
    
    
    
    
            ),
    
    
           
    
    
        },
        
    
    
    });
    It take me around 3-5 sec when switching the tab.Please give me some solution

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    I also attached tis component to my project
    https://github.com/mitchellsimoens/Ux.tab.OptimizedTab . Please give me some solution

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    I haven't read your code, but what I would try
    - check the Galaxy's performance on the basic sencha app (sencha generate app TestApp path/to/TestApp)

    if that's ok:
    - check if youre not using too much heavy CSS3 (-webkit-gradient, border-radius, box-shadow, text-shadow,..)
    - remove some of your code step by step, and see if performance goes up

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      1  

    Default Try this...

    Try this...


    Which Galaxy Tab do you have? The first one or a new one?

    I've mentioned this in a few other posts, but when you load up your app, copy and paste this in the console and what number do you get? Ideally a quite well optimised tabpanel you should get around 400 items depending how much stuff you have in there.

    Code:
    document.getElementsByTagName("*").length
    Click around and try pasting again, what variations in numbers do you get? This shows you the total number of DOM items active.

    I have around 250 in my first page, my second page (a fairly heavy dataview with popups) I get around 350. a Map panel based on leaflet I get around 400 items. A panel with 3 vertical lists with heavy graphics and text I get around 500 items.

    Another thing I have found which has sped my tabpanel app up quite a lot is to listen for the active item change, then do a mystore.load(); This also speeds up the startup time of my app, as it is not loading all the stores at once. However in your case it may increase the load time between tabpanel switches...

    :-)

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    hi, thanks for ur reply. Did u means paste the code to chrome inspect element console?i paste the code to the console and i get 1064 items. Btw i am using latest galaxy tab for testing

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default 1000 is way too many!

    1000 is way too many!


    Wow, 1000 items is way too much. To me that suggests either the OptimizedTab is not working/setup correctly. I had the same problem as you when I was trying to set this up, the OptimizedTab was not working.

    I had 1100 items before I added the OptimizedTab. When i activated it it went down to about 300.

    To test that the OptimizedTab is working properly, paste the command into the console after first load. I get about 300. Paste the command after each tab switch and go back to tab 1, you should have the same number, about 300.

    Without the OptimizedTab when switching back to tab 1 you will have a higher number, probably about 800-1100.

    For me to check it is working I created a basic OptimizedTab app with a google map panel in 1 and a carousel in another. If you look closely to see it working you will see the Google map panel being removed just before the animation ends (the optimizedtab removes items before the animation completes)

    I am sure once you get your active DOM items down to 300 your app will be much faster!

    :-)

  7. #7
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    Hi, Can u help me check my code either the optimize tab has setup properly? btw can u provide me some example about the optimize tab

  8. #8
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    Hi, Can u help me check my code either the optimize tab has setup properly? btw can u provide me some example about the optimize tab

  9. #9
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
    koolll is on a distinguished road

      0  

    Default


    I modify my code. nw become 582 .is it ok?

  10. #10
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default That's better....

    That's better....


    That is more like it....what did you change? When you switch tabs, and switch back to that tab the number is still the same?

Thread Participants: 2

Tags for this Thread