Wait! Looks like we don't have enough information to add this to bug database. Please follow this template bug format.
  1. #1
    Sencha - Sencha Touch Dev Team
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    19
    RossGerbasi will become famous soon enough RossGerbasi will become famous soon enough

      0  

    Default TabPanel Component LifeCycle

    TabPanel Component LifeCycle


    I am trying to understand the component lifecycle in general. Order and what events I should be using for different app functionlaity. For example differences between initialize, activate, & show then hide, deactivate & erase.

    I think I am getting a really good idea of what is going on and I am not sure if this is a "bug" but it does put a wrench in my theory that "show/hide" are both where I deal with turning on/off features that could have performance hits. I am coming from a flex background where addedToStage/removedFromStage were places we put a lot of this logic.

    What I am seeing is when a TabPanel that is nested inside another TabPanel it is triggering a "show" and "activate" event for its first child even though the parent TabPanel is not showing it.

    I guess I can understand activate but shouldn't show be specifically when this component is shown on the screen? In my results below I have bolded the problem events. Simply copy this code into a html file and load the page. Check out the console, I am using chrome.

    Here is my test case
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>ST2 LifeCycle Test</title>
         <style type="text/css">
             @import url(http://cdn.sencha.io/touch/sencha-touch-2.0.1/resources/css/sencha-touch.css);
        </style>
        <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/touch/sencha-touch-2.0.1/sencha-touch-all.js"></script>
        <script>
            var l = {
                initialize:function(){
                    console.log(this.getId()+" Init");
                },
                show:function(){
                    console.log(this.getId()+" Show");
                },
                hide:function(){
                    console.log(this.getId()+" Hide");
                },
                activate:function(){
                    console.log(this.getId()+" Activate");
                },
                add:function(){
                    console.log(this.getId()+" Add");
                },
                deactivate:function(){
                    console.log(this.getId()+" Deactivate");
                },
                erased:function(){
                    console.log(this.getId()+" Erased");
                },
                move:function(){
                    console.log(this.getId()+" Move");
                },
                resize:function(){
                    console.log(this.getId()+" resize");
                },
                updatedata:function(){
                    console.log(this.getId()+" UpdateData");
                }
            };
    
    
            Ext.define("MainView", {
                extend:"Ext.TabPanel",
                defaults: {
                    styleHtmlContent: true
                },
                config:{
                    tabBarPosition: 'bottom',
                    items:[
                        {
                            title:"Home 1",
                            id:"Home_1",
                            iconCls:"home",
                            html:"Home 1",
                            listeners:l
                        },
                        {
                            title:"Home 2",
                            id:"Home_2",
                            iconCls:"home",
                            html:"Home 2",
                            listeners:l
                        },
                        {
                            title:"Home 3",
                            id:"Home_3",
                            iconCls:"home",
                            xtype:"tabpanel",
                            listeners:l,
                            items:[
                                {
                                    title:"Sub 1",
                                    id:"Sub_1",
                                    iconCls:"star",
                                    html:"Sub 1",
                                    listeners:l
                                },
                                {
                                    title:"Sub 2",
                                    id:"Sub_2",
                                    iconCls:"star",
                                    html:"Sub 2",
                                    listeners:l
                                }
                            ]
                        }
    
    
                    ]
                }
            })
    
    
            Ext.application({
                name:"Test App",
                launch:function(){
                    Ext.Viewport.add(Ext.create('MainView'));
                }
            });
        </script>
    </head>
    <body>
    </body>
    </html>
    These are my results
    Code:
    index.html:12 - Home_1 Init
    index.html:21 - Home_1 Activate
    index.html:18 - Home_1 Hide
    index.html:12 - Home_2 Init
    index.html:18 - Home_2 Hide
    index.html:12 - Sub_1 Init
    index.html:21 - Sub_1 Activate
    index.html:18 - Sub_1 Hide
    index.html:12 - Sub_2 Init
    index.html:18 - Sub_2 Hide
    index.html:15 - Sub_1 Show
    index.html:12 - Home_3 Init
    index.html:18 - Home_3 Hide
    index.html:15 - Home_1 Show

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    750
    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


    We can look into it but the layout does show the item but there are several reflows
    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 - Sencha Touch Dev Team
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    19
    RossGerbasi will become famous soon enough RossGerbasi will become famous soon enough

      0  

    Default


    So what do you recommend in that situation? Essentially I would like to add listeners and functionality when an item is "shown" then remove it when it is hidden. How would you go about doing this on a nested TabPanel?

    thanks
    -ross

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    750
    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 use the activate event to add items, deactivate to remove them. Or you can use the activeitemchange event on the tab panel to add items to the new item and remove items from the old item.
    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.

  5. #5
    Sencha - Sencha Touch Dev Team
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    19
    RossGerbasi will become famous soon enough RossGerbasi will become famous soon enough

      0  

    Default


    Well sadly Activate is called load for sub_1 also so it doesn't really help me much more then show. ActiveItemChange is a good idea but it isn't as clean as I would like. I would like to keep all my logic for components inside the component itself. Not a huge fan of parent containers delegating to much to children if possible.

    For example if you look at the code I sent imagine a map is inside of Sub 1. I want to active the GPS auto-tracking when the map is active on the screen and I want to shut it off then the map is hidden. I don't want the GPS running any other time. I was hoping to be able to use show to turn it on and hide to shut it off but that will not work. I also don't like the idea of the main TabPanel informing a component of the the sub panel that it is actually shown on the screen. Is that the best way to go about it though?

    thanks again,
    -ross

  6. #6
    Sencha - Sencha Touch Dev Team
    Join Date
    Oct 2010
    Posts
    80
    Vote Rating
    19
    RossGerbasi will become famous soon enough RossGerbasi will become famous soon enough

      0  

    Default


    Alright after more testing with this I think "painted" may have been the event I was interested in. It seems that all components get "painted" and "erased" events when they are actually shown on the screen. The only thing that seems to break this is a carousel as 2 items inside are "painted" at the same time to allow for scrolling. I don't think this will be a problem as I don't see putting any components in a carousel that will require heavy init.

    Does this sound like a good way to handle something like this? specifically in my map example before for turning on and off GPS tracking i can use painted/erased events?

    Lastly is there a reason carousel children do not dispatch 'show' events?

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar