Inspecting your Ext.onReady variables

In the Ext JS examples included in the Ext JS package, you'll find usually this code:

Ext.onReady(function(){
  ..
  var store = new Ext.data.SimpleStore({
    ..
  });

  var grid = new Ext.grid.GridPanel({
    store: store,
    ..
  });
});

Notice the var keyword in front of the declared variables! The var keyword is defining the variables as local variables. They are only existing in the scope of the anonymous function which is passed to the Ext.onReady method.
But what if we'd like to inspect the values of our local variables in firebug? We could set a breakpoint inside our anonymous function which will allow us to inspect these local variables. But it's a little annoying to do that everytime we're working on an Ext page.

Well, we just could remove the var keyword or use this.store. But that would clutter up our global scope which isn't that nice.

Here is a better solution I came up with today:

Ext.screen = {}

Ext.onReady(function(){
  var s = Ext.screen;
  ..
  s.store = new Ext.data.SimpleStore({
    ..
  });

  s.grid = new Ext.grid.GridPanel({
    store: s.store,
    ..
  });
});

With that solution all our local variables can be referenced by Ext.screen.variable in our firebug console, while keeping our global scope clean by using the Ext.screen namespace.