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