View Full Version : "This" is not defined in a grid. How to get a reference of a grid?

18 Dec 2012, 4:14 AM
I have a simple grid which is just defined.
Ext.define("Abc.util.Test", { extend: "Ext.panel.Panel",
Later I want to use this defined grid and create different instances, like
var myGrid123 = Ext.create("Abc.util.Test",{ title: "neu" });

Before the data in the grid can be saved it has to be validated. But when calling the this.validate() method "this" is not defined yet.


Ext.define("Abc.util.Test", {
extend: "Ext.panel.Panel",
title: "abcd",
width: 300,
height: 250,
renderTo: 'grid-example',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
iconCls: 'icon-save',
text: 'Save',
scope: this,
handler: function () {
//if (myGrid.validate(), myGrid) { //This is working but only when the created class is myGrid
if (this.validate(), this) { // <-- Here is the problem
validate: function () { // <-- How can I call this function from the save button?
console.log("happy validating");
initComponent: function () {

var myGrid = Ext.create("Abc.util.Test",{
title: "neu"

I want to use this grid for several cases. As the creation of the class is done in a different file I would like to get rid of the dependency to name it "myGrid".
The above way for doing it is probably wrong, but how can I call validate()?
Thanks for any hints.

18 Dec 2012, 4:26 AM
You could move the item creation into an initComponent but it might be easier just to use a component query:

items: [{
iconCls: 'icon-save',
text: 'Save',
handler: function () {
var grid = this.up('panel');


Ideally this would be targeting the alias of the 'grid' (which doesn't appear to actually be a grid) but you haven't given it an alias.

I've removed the scope config, it wasn't helping. The default this will be the button.

You have a trailing comma at the end of your handler. I highly recommend getting an IDE that will highlight mistakes like that for you.

This line is also nonsense:

if (this.validate(), this) {

It's valid JavaScript but only just. There shouldn't be two 'arguments' passed to if.

18 Dec 2012, 4:33 AM
Try this as handler

handler: function(obj) {

var me = obj;
var panel = me.up('panel');

Hmm... Skirtle and I double posted. Its or in the initComponent like Skritle says or else you could try the solution above.