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.

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.

Quote:

---

Originally Posted by mitchellsimoens

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?

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...

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.

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');                 
                }
            }

        }]
    }
});

---

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