extjs change panel title on an event

Question

I have a grid panel like this

Ext.define('sCon.view.SalesGrid',{
        extend: 'Ext.grid.GridPanel',
        title: 'Sales Data',

        //other params   

        initComponent: function(){
            this.callParent(arguments);
        }
    });

On a click event, I want to change the title of this panel. My code inside the controller looks like this.

Ext.define('sCon.controller.SalesGridController', {
        extend: 'Ext.app.Controller',
        views: ['SalesGrid'],

        // other handlers

        changeTitle: function(newTitle){
            this.getView('SalesGrid').setTitle('title_changed');
        }

Currently it says that it does not have a function as setTitle(). But the docs say that grid panel has setTitle() function. I also tried changing the title using the 'title' variable like

 changeTitle: function(newTitle){
            this.getView('SalesGrid').title = 'title_changed';

Neither works.. Please help.

Answer 1

UPD: Here is some refs docs from Sencha for ExtJS 4.1.

Use refs property of your controller to get references to any Components.

In your example:

Ext.define('sCon.view.SalesGrid',{
  extend: 'Ext.grid.GridPanel',
  title: 'Sales Data',

  alias: 'widget.salesgrid',

  //other params   

  initComponent: function(){
    this.callParent(arguments);
  }
});

In Controller add:

refs: [
  { ref: 'salesGrid', selector: 'salesgrid', },
]

Then you can access your SalesGrid view from anywhere in your controller like this.getSalesGrid(); method.

In Your case:

changeTitle: function(newTitle){
  this.getSalesGrid().setTitle('title_changed');
}

Answer 2

Note

In the decribed case webbandit answer is the best for accessing a view instance, this one stays for clarification on the use of autogenerated getters.

The selector Method you use just gives you the class and not an instance of it!

You should do it this way

this.getView('SalesGrid').create().setTitle('title_changed');

See API