View Full Version : Grid / Toolbar / Button - scope! (Again, I know, but I'm really struggling)

Andrew Peacock
14 Aug 2010, 1:53 PM
Hi all,

I know this question gets asked about once a day, but I'm struggling to get the scope of a button to be the grid within which the button sites.

Here's the code:

var ary = [
[1, 'TV'],
[2, 'PC'],
[3, 'Console'],
[4, 'Sofa']

var aryStore = new Ext.data.ArrayStore({
fields: [
{name: 'id', type: 'int'},
{name: 'product', type: 'str'}
idIndex: 0,
data: ary

var grid = new Ext.grid.GridPanel({
title: 'Grid',
store: aryStore,
colModel: new Ext.grid.ColumnModel([
header: "ID",
dataIndex: 'id'
header: "Product",
dataIndex: 'product'


tbar: [{
text: 'Test',
scope: this,
handler: function(btn, ev) {



Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'images/s.gif';

var viewport = new Ext.Viewport({

});I've tried setting the button's scope to

I've tried moving the array/store/grid creation inside and outside the ext onready.

I've tried using

handler: function (btn, event) {

handler: function (btn, event) {
And none of this has set 'this' to the grid when in the handler function.

And to save any of you the effort of pointing me to the default "learn more about scope" links,

- I've read the 2 scope tutorials
- I've read the button and button scope documentation
- I'm a developer in other languages, (mainly PHP) so I understand the concept of scope in a general sense.

I think the problem is either:
1. My understanding of scope in JS, specifically.
2. My understanding of scope in ExtJS, specifically.
3. The way I'm creating my components

I think it's the latter. But I need some help on the best way to do this.

Can anyone help please?

Thanks in advance,

14 Aug 2010, 2:12 PM
You have references to all the UI objects you are using in lexical scope so why do you think you need a "this" to use?

Want to use the grid? Use the "grid" var.