1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    1
    dmosinee is on a distinguished road

      1  

    Default Unanswered: How do I refresh the refs in my controller when their target is recreated?

    Unanswered: How do I refresh the refs in my controller when their target is recreated?


    Hi all,
    So I've been working with Sencha for a few days now, but I've run into a big stumbling block. I have a panel that I show as modal and centered, which I show like this:
    Code:
    var panel = Ext.create('MyApp.view.Recipients',
    {
        centered : true,
        modal : true,
        width : Ext.Viewport.getWindowWidth() - 50,
        height : Ext.Viewport.getWindowHeight() - 50
    });
    Ext.Viewport.add(panel);
    This shows up great, and meetsmy needs perfectly. In my controller, I set up refs to several items on this panel like this:
    Code:
            refs :
            {
                reclist : '#recipientlist',
                reclistsearch : '#recipientlistsearch',
                rectofield : '#recipients_tofield',
            },
    and then I use these in the control section to link up events. Everything works great the first time I show the panel. When the user is done I call this to remove the panel from view:
    Code:
    Ext.Viewport.child('panel').destroy();
    This works fine and closes the view as expected. The problem comes when I show the panel again using the same code I posted above; this time when the panel shows up none of the controls have any events hooked up to them. It feels to me like the refs are still pointing somewhere off into memory at controls that have already been destroyed.

    How do I get the refs to point to the newly recreated controls like they should be ?

    Thanks for looking!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    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


    If you don't use id, when the component is destroyed the refs should then be null.
    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
    Apr 2012
    Posts
    2
    Vote Rating
    1
    dmosinee is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    If you don't use id, when the component is destroyed the refs should then be null.
    What should I use instead of id then to hook up my controller? From the docs it looks like I can use action the same way I was using id :
    Code:
    textfield[action=putIDValueHere]'
    Would this cause poor performance or other issues though? Seems weird to be trying to hook up an action to every textfield with a certain attribute (action) when I know that there will only ever be one element I want to listen on.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    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


    action is a custom property that is not used by the framework, this is why we use it often.
    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 User
    Join Date
    Jul 2012
    Posts
    4
    Vote Rating
    1
    pabramowitsch is on a distinguished road

      1  

    Default The previous thread saved my life... but

    The previous thread saved my life... but


    Shouldn't this whole topic be part of the primary documentation? The case when one navigates away from a panel and recreates it is incredibly common, If using id in the selector is not the way to go with refs, then the correct approach should be the one described everywhere: including in your videos.

    Thanks, P

  6. #6
    Sencha User
    Join Date
    May 2012
    Posts
    63
    Vote Rating
    6
    jeffrey.hobson is on a distinguished road

      0  

    Default


    Quote Originally Posted by pabramowitsch View Post
    Shouldn't this whole topic be part of the primary documentation? The case when one navigates away from a panel and recreates it is incredibly common, If using id in the selector is not the way to go with refs, then the correct approach should be the one described everywhere: including in your videos.

    Thanks, P
    I agree wholeheartedly.

    But, I thought I'd chime in hear to mention you can use the "itemId" config on each component (instead of "id") and the refs should update appropriately. If they don't, try including the parent container in your ref (i.e. "<xtypeOfParent> #itemIdOfElement"). Both of those have worked for me in the past.

  7. #7
    Sencha User
    Join Date
    Jul 2012
    Posts
    4
    Vote Rating
    1
    pabramowitsch is on a distinguished road

      0  

    Default Thanks for your answer... and perhaps you can answer this one too

    Thanks for your answer... and perhaps you can answer this one too


    Does anyone know exactly when the 'refs' expressions are evaluated.... i.e.

    When the controller is created
    When any event is fired
    When the associated view is visible (using class naming patterns to generate the association)

    I'm finding that sometimes a ref on a controller will not pick up an event while a listener attached to the corresponding widget's definition will. Are there some rules one can depend on?

    - Peter

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    0
    XANDERM is on a distinguished road

      0  

    Default


    Can it help you?

    You can change your refs array in the controller

    Code:
    this.refs = [ {..., ...},{..., ...}....];
    and then:

    Code:
    var me = this;  // (this = controller)
    refs = Ext.Array.from(me.refs);
    Ext.Array.each(refs, function(info) {
    var ref = info.ref, fn = 'get' + Ext.String.capitalize(ref); me[fn] = Ext.Function.pass(me.getRef, [ref, info], me);
    });

  9. #9
    Sencha User
    Join Date
    Sep 2012
    Posts
    2
    Vote Rating
    0
    XANDERM is on a distinguished road

      0  

    Default


    I forgot, see the documentation, in my case:

    http://docs.sencha.com/ext-js/4-0/so...app-Controller


    Create your own method GetRef: function (ref, info, config) (copy and paste of the documentation) and delete the line " if (!cached) {" and your "}" so:

    Code:
    getRef: function(ref, info, config) {
            this.refCache = this.refCache || {};
            info = info || {};
            config = config || {};
    
    
            Ext.apply(info, config);
    
    
            if (info.forceCreate) {
                return Ext.ComponentManager.create(info, 'component');
            }
    
    
            var me = this,
                selector = info.selector,
                cached = me.refCache[ref];
            me.refCache[ref] = cached = Ext.ComponentQuery.query(info.selector)[0];
    
            if (!cached && info.autoCreate) {
                me.refCache[ref] = cached = Ext.ComponentManager.create(info, 'component');
            }
            if (cached) {
                cached.on('beforedestroy', function() {
                    me.refCache[ref] = null;
                });
            }
    
    
            return cached;
        },