Friday, July 29, 2011

ExtJs 4 MVC get reference of views

In old version of ExtJs how do we get reference of any component? Either we use control.getComponent() method or we use Ext.getCmp('controlID') method. This will give you an instance of particular component. So how do we get instance of views in ExtJs 4 MVC?

it has something called refs. You can add reference to any views in any controller.

refs: [
            ref : 'myGrid',
            selector: 'myGrid'

Here selector is the type of the component. This use can set with alias for views. For Example.

Ext.define('myApp.myGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',

    initComponent: function () {   

ExtJs MVC has something called component query. This will be used to get reference of particular type of component.

ref  creates a function with name specified there and you can use that function to get reference of that particular component.

You will get reference of myGrid by following code inside controller.

var myGrid = this.getMyGrid();

Remember here that it will not create new instance of grid. It will give a reference to an existing instance. If no instance is available it will return null. To know how to create an instance of view check out my earlier blog here.


  1. I have trouble with this technic when I've got two instances of same view because this code : var myGrid = this.getMyGrid();
    returns a reference to the first view but never the second.
    Do you have a solution ?

    (Excuse me for my very bad English, I'm French !)

  2. hi...Zorglub yes u can by this..

    refs: [{
    ref : 'firstGrid',
    selector: 'yourFirstGridParentPanelAlias sameGrid'
    ref : 'secondGrid',
    selector: 'yourSecondGridParentPanelAlias sameGrid'

    and now you can get

    var firstGrid = this.getFirstGrid();
    var secondGrid = this.getSecondGrid();

  3. Hi,i have created reference for my view as,
    refs: [{
    ref: 'panel',
    selector: 'details'

    when i call the ref as this.getPanel(), it returns 'undefined'. and my alias is,
    alias: 'widget.details'.

    my problem is i am not able to get the reference as 'details' when i call this.getPanel(), instead i get 'undefined'/'null'