1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    70
    Vote Rating
    0
    mukeshgla is on a distinguished road

      0  

    Default Unanswered: Performance of TabPanel

    Unanswered: Performance of TabPanel


    Hi I want to know few things about performance of TabPanel.
    1>how does it store different frames? does it load them on initialization of Tab ? or load when we click the tab title ?
    2> if it loads all the frames at initialization then it might be storing all the frames in cache then how memory efficient will it be?
    3> can i use Tab panel when I need 8-10 frames, and each frame(Page) have large data like ( Images, charts, and table having 1000 of rows) will it be able to run smoothly on devices which have limited resources like tab ?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    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


    All tabs are created on initialization of the tab panel. To optimize it in your app you can add/remove items from each tab and in fact a great chance for abstraction.

    Each tab is a container. When that container's activate event fires then you add the items to it. When the deactivate event fires, you remove the items. It's not too much how many components you have instantiated but more of the DOM size.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    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


    I actually made a component to do this:

    https://github.com/mitchellsimoens/Ux.tab.OptimizedTab
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    47
    Vote Rating
    0
    Answers
    5
    BörnR is on a distinguished road

      0  

    Default


    Thats really cool, thx mitchellsimoens.

    I dont know why, but it didn't work for me

    The TabOptimizedTab.js is loaded, but the constructor don't starts.
    Can you tell me the files i need to edit?

    What i did now:
    I copied the sdk, and ux folder to my Project.
    Now i Cant build anymore my project with message
    /Applications/SenchaSDKTools-2.0.0-Beta/bin/sencha: line 5: sdk/command/sencha: No such file or directory

    Now i replaced the sdk with my old one.
    In my Build isn't any ux Folder.

    Edits:
    1. app.js -> added Loader Path Ux: 'ux'
    Code:
    Ext.Loader.setPath({
        Ext: 'sdk/src',
        Ux: 'ux'
    });
    i don't need it but i did it :-D

    2. Main.js -> added requires Optimize and default type
    Code:
    Ext.define("Project.view.Main", {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        
        requires: [
    'Ux.tab.OptimizedTab'
        ],
        
            config: {
            id:'mainview',
            autoDestroy: true,
                tabBar: {
            docked: 'bottom',
            
                    layout: {
                pack: 'center'
            },
            
                    id: 'mainTabPanel'
            },
            
            defaultType: 'optimized-tab',
            
                 items: [
            {xtype: 'tab1'}, //Navigation View
            {xtype: 'tab2'},//Form View
            {xtype: 'tab3'},//Addition Tab and Form View
    
    
            ]
        }    
    });


    thats all what i did.
    Or did i forget anything?

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    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


    That's because you're not using it. You have defaultType correctly but in the items array you have xtypes defined which overrides the defaultType. You should have something like:

    Code:
    items : [
        {
            items : [
                {
                    xtype : 'tab1'
                }
            ]
        },
        {
            items : [
                {
                    xtype : 'tab2'
                }
            ]
        },
        {
            items : [
                {
                    xtype : 'tab3'
                }
            ]
        }
    ]
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    47
    Vote Rating
    0
    Answers
    5
    BörnR is on a distinguished road

      0  

    Default


    i didn't use it? I thought this is the best and fastest way to use the tab Panel.
    I tried like you say but now i get an Error.

    Code:
    Error: [ERROR][Ext.Container#onFirstItemAdd] Adding a card to a tab container without specifying any tab configuration
    What should i config now?
    When i copy paste my config from my xtype to this place, like your Example from git hub, all works fine.

    I though its the same when i use it with xtype.

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    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


    Oh sorry, you need a title config in the top items (not where you have xtype, where you have items.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Posts
    47
    Vote Rating
    0
    Answers
    5
    BörnR is on a distinguished road

      0  

    Default


    ok i wrote the title and iconcls now over the item with my xtype.
    This helps, now the overwrite appear.

    Now i got the Next Problems

    the ids from my main view are now duplicate .... should i use actions to avoid this? Or should i update anything to destroy this ids.

    it looks like my xtype views need an update now.
    I got only a blank screen at the card.

    Code:
    Ext.define("Project.view.Home", {
        extend: 'Ext.navigation.View',
        xtype: 'tab1',
        
        requires: [
    'Project.view.home.ImageList',
            'Ext.Img'
        ],
        
        config: {
        
            autoDestroy: true,
            
            id: 'tab1',
            
            
        navigationBar: {
            id: 'MainNav'
        },
            
        items: [{
                xtype: 'imageList',
            title: '<img src="resources/loading/logo.png" style="margin-top: 6px;">',
            scrollable: true
        },
        ]
           
        },
        
        
    });
    is there anything wrong? My sec on Tab with extends Ext.Container does have a white screen too.

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    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


    I would never use the id config. I use custom properties like action and which to distinguish instances of the same xtype.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha User
    Join Date
    Apr 2012
    Posts
    47
    Vote Rating
    0
    Answers
    5
    BörnR is on a distinguished road

      0  

    Default


    ok i removed my ids... i thougt i use them, but was depricatet

    now i got two titlebars and a white screen card .
    I really feeling very stupid now.

    Why did it load my tabs two times?
    Thats why i don't see anything i think, the second loading card is the empty card which overlays may data card.

    May tab 1 view now got no id just the type with my image list.