1. #1
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
    Answers
    1
    swarnendude is on a distinguished road

      0  

    Question Answered: Controller "refs" property - confusion!

    Answered: Controller "refs" property - confusion!


    Can anyone describe the "refs" property of controller? I am having a image on a container and I want to perform some task on clicking this image. Now I think this is somehow possible by putting the "refs" property in controller but a little more explanation would help.

    The "afterrender" event of container is gone and I am not sure how to add a "click" listener to container. I checked the existing examples but still confused about this property.
    Swarnendu
    Co-founder & Lead Architect @ Innofied

    ------------------
    I blog at http://www.swarnendude.com

  2. I would suggest reading the following articles to get more familiar with the MVC structure. this.control and refs have two completely different purposes.

    http://www.sencha.com/learn/architec...xt-js-4-part-1
    http://www.sencha.com/learn/architec...xt-js-4-part-2
    http://www.sencha.com/learn/architec...xt-js-4-part-3

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,646
    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


    you can use the renderedchange event instead of afterrender... the docs will improve before GA...

    refs create a reference to a component... basically using Ext.ComponentQuery#down. If you look at the source of the kitchensink Main controller it sets up a few refs.
    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. #3
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
    Answers
    1
    swarnendude is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    you can use the renderedchange event instead of afterrender... the docs will improve before GA...

    refs create a reference to a component... basically using Ext.ComponentQuery#down. If you look at the source of the kitchensink Main controller it sets up a few refs.
    Hi Michell,

    This is what I am doing:

    Code:
           Ext.create('Ext.Panel', {
                height : 128,
                docked : 'top',
                html : 'Hello',
                listeners : {
                    scope : this,
                    renderedchange : function(panel, a , b , c){
                        console.log('Some logs');
                    }
                }
            });
    But that event is never getting fired. Am I doing it right?
    Swarnendu
    Co-founder & Lead Architect @ Innofied

    ------------------
    I blog at http://www.swarnendude.com

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,646
    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


    Looks like it will only do it on the parent...

    Code:
    Ext.create('Ext.Panel', {
        fullscreen : true,
        layout     : 'fit',
        items      : [
            {
                xtype     : 'panel',
                listeners : {
                    renderedchange : function(panel) {
                        console.log('nested panel');
                    }
                }
            }
        ],
        listeners  : {
            renderedchange : function(panel) {
                console.log('main panel');
            }
        }
    });
    All it will console out is 'main panel'... not the behavior I would expect IMO...
    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. #5
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    Answers
    102
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    IMHO, refs are good when you have a single, static instance of a view. I honestly don't like them. So i use this.control() instead.

  7. #6
    Sencha User swarnendude's Avatar
    Join Date
    Jul 2009
    Location
    Kolkata, India
    Posts
    117
    Vote Rating
    1
    Answers
    1
    swarnendude is on a distinguished road

      0  

    Default


    Yes, I got some idea but some more description of it in doc would help.

    @Michell

    I added the event "renederedchange" for parent and all the child items - but still I didn't get any of them fired. This is my code:

    Code:
    Ext.define('InvoiceIT.view.Dashboard', {
        extend : 'Ext.Panel',
        xtype : 'dashboard',
        listeners : {
            scope : this,
            renderedchange : function(panel, a , b , c){
                console.log('Parent')
            }
        },
        config : {
            defaults : {
                xtype : 'container'
            },
            items : [{
                height : 128,
                docked : 'top',
                listeners : {
                    scope : this,
                    renderedchange : function(panel, a , b , c){
                        console.log('top');                   
                    }
                }
    
            }, {
                listeners : {
                    scope : this,
                    renderedchange : function(panel, a , b , c){
                        console.log('center');                   
                    }
                }
            },{
                docked : 'bottom',
                height : 242,
                listeners : {
                    scope : this,
                    renderedchange : function(panel, a , b , c){
                        console.log('bottom');                   
                    }
                }
    
            }]
        }
    });
    Swarnendu
    Co-founder & Lead Architect @ Innofied

    ------------------
    I blog at http://www.swarnendude.com

  8. #7
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    Answers
    28
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    I would suggest reading the following articles to get more familiar with the MVC structure. this.control and refs have two completely different purposes.

    http://www.sencha.com/learn/architec...xt-js-4-part-1
    http://www.sencha.com/learn/architec...xt-js-4-part-2
    http://www.sencha.com/learn/architec...xt-js-4-part-3