Results 1 to 3 of 3

Thread: Object Persistence / Lifecycle Question

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    21
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    21
    Vote Rating
    1
      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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •