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.

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

Solution 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

Comments

[s.webbandit]

Your error means that something was returned by this.getView('SalesGrid') doesn't have .setTitle() method. Looks like you haven't actually got 'SalesGrid' view by this.getView('SalesGrid').

[amrk7]

yeah forgot to mention that. when i log console.log(this.getView('SalesGrid')), I am getting some thing like this - function constructor() { return this.constructor.apply(this, arguments) || null; } ,When I log - this.getView('SalesGrid'), Iam getting "undefined"..

[VDP]

this.query('SalesGrid')[0] or this.getComponent(0) in staid of this.getView('SalesGrid') will get you the salesgrid... or @webbandit his solution is even better using the controller...

[amrk7]

Thanks! working... thought "views: ['SalesGrid']," itself would refer my salesGrid.

[sra]

@webbandit you should explain more on refs or at least provide API links.

[sra]

@webbandit This property is new since 4.1

[amrk7]

It doesn't seem to be working. Even if it does, would I rather use the same instance of object instead of creating new object on each event? (I dont really know.. I am new to extjs)

[s.webbandit]

Yes it is. Take some time to move to 4.1. From version to version ExtJS becomes better and better.

[sra]

@amruthkesav this is the way used in the docs. See the updated post. And you can't say it for all cases... In some I use the same view instance in other I create a new one each. It depends on the sort of view and what you doing. All in all you should use a mix