1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    21
    Vote Rating
    1
    brian.scott@talgov.com is an unknown quantity at this point

      0  

    Default Unanswered: Object Persistence / Lifecycle Question

    Unanswered: Object Persistence / Lifecycle Question


    Hello friends -

    I'm struggling a bit with changing values on labels after an event and having that change stick across page loads/hides/shows. For example, I'd like to have a label on a toolbar that shows me the name of a user after they've logged in. I like to share this value on a toolbar that is linked across several views; however, a change at controller action time doesn't seem to make the change persistent. I can get the value to change (i.e., 'Welcome', to 'Welcome, Brian') at one page load, but when I move on to another page, I'm stuck back with the initial html for the object.

    Here is a short example I built showing what I'm experiencing.

    Views:

    [Note: sharing toolbar]
    Code:
    Ext.define('MyApp.view.MyToolbar', {    extend: 'Ext.Toolbar',
        alias: 'widget.MyToolbar',
    
    
        config: {
            docked: 'bottom',
            html: 'Initial HTML!s',
            id: 'MyToolbar',
            itemId: 'MyToolbar',
            items: [
                {
                    xtype: 'label',
                    html: 'Fun Label',
                    id: 'MyLabel',
                    itemId: 'MyLabel',
                    width: 150
                },
                {
                    xtype: 'button',
                    html: 'Push here',
                    id: 'MyButton',
                    itemId: 'MyButton',
                    text: 'MyButton'
                }
            ]
        }
    
    
    });
    Code:
    Ext.define('MyApp.view.MyPanel', {    extend: 'Ext.Panel',
    
    
        requires: [
            'MyApp.view.MyToolbar'
        ],
    
    
        config: {
            html: 'First Panel',
            id: 'MyPanel',
            itemId: '',
            items: [
                {
                    xtype: 'MyToolbar'
                },
                {
                    xtype: 'button',
                    id: 'ButtonTwo',
                    itemId: 'ButtonTwo',
                    text: 'Click me!'
                }
            ]
        }
    
    
    });
    Code:
    Ext.define('MyApp.view.anotherPanel', {    extend: 'Ext.Panel',
    
    
        alternateClassName: [
            'anotherPanel'
        ],
        requires: [
            'MyApp.view.MyToolbar'
        ],
    
    
        config: {
            html: 'Another Panel',
            id: 'anotherPanel',
            itemId: 'anotherPanel',
            items: [
                {
                    xtype: 'MyToolbar'
                }
            ]
        }
    
    
    });
    Controller:

    Code:
    Ext.define('MyApp.controller.myPanelController', {    extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                anotherPanel: '#anotherPanel',
                myPanel: '#MyPanel',
                toolbarButton: '#MyLabel',
                ButtonTwo: '#ButtonTwo'
            },
    
    
            control: {
                "button#ButtonTwo": {
                    tap: 'onButtonTap'
                }
            }
        },
    
    
        onButtonTap: function(button, e, options) {
            console.log("button hit");
            var anotherPanel = this.getAnotherPanel();
            var firstPanel = this.getMyPanel(); 
            var buttonTwo = this.getButtonTwo();
    
            var theButton = this.getToolbarButton(); 
    
    
            theButton.setHtml("super test deluxe");
    
    
            console.log("the html should be rendering differently"); 
            console.log(theButton.getHtml()); // LOGS UPDATED VALUE IN THE CONSOLE
    
    
            console.log(theButton); 
    
    
            Ext.Viewport.add(anotherPanel); 
            anotherPanel.show(true); // AT SHOW TIME, THE BUTTON RENDERS ORIGINAL VALUE 
            firstPanel.hide();
        },
    
    
    
    
    });
    Note: If I do not link the toolbar across views, and only show it on 'anotherPanel', I get the html that I would like, but this largely defeats the purpose of sharing a component.

    Any insight is GREATLY appreciated.
    brian

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,088
    Answers
    3503
    Vote Rating
    855
    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 store the user info in a model instance somewhere like on the application namespace and have the toolbar use that to generate the text to display.
    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 User
    Join Date
    Jan 2013
    Posts
    21
    Vote Rating
    1
    brian.scott@talgov.com is an unknown quantity at this point

      0  

    Default


    Hi Mitchell -

    I've got a model set up to store the data, but what event can I tie to at controller action time to retrieve and reset the value? I've read elsewhere that the painted event is not accessible through a controller action (even though Architect will allow that choice to be made). Similarly, tying console.logs to a controller action at show() and activate() times fail to fire.

    So having a model is fine and good. What event do I tie to for a toolbar style object that is shared across views to populate the correct value everytime it renders? I know that my query is correct, b/c if I log in the console at initialize time, the logger goes wild. Unfortunately, I can't figure out what event to tie to in order to allow appropriate rendering once I have a value (which doesn't happen until long after init)?

    On a more general note, where can I go to get an understanding of the lifecycle of an object? init makes plenty of sense? But does activate fire before show()? This data is somewhere. Where?

    brian