GridPanel as item of tabPanel

I'm having trouble knowing if I syntactically have this setup right. From another thread, I understand to add the GridPanel to the tabBar items, which I do so below. In my App.js, I define a grid copied from the ExtJS example (here).

var grid = new Ext.grid.GridPanel({
    // Details can be seen at
    // http://dev.sencha.com/开发者_JAVA百科deploy/ext-3.4.0/docs/?class=Ext.Component?class=Ext.grid.GridPanel
});

Below that, I create an instance of my app:

appname.App = Ext.extend(Ext.TabPanel, {

fullscreen: true,

tabBar: {
    ui: 'gray',
    dock: 'bottom',
    layout: { pack: 'center' }
},

cardSwitchAnimation: false,

initComponent: function() {

    if (navigator.onLine) {

        // Add items to the tabPanel
        this.items = [{
            title: 'Tab 1',
            iconCls: 'tab1',
            xtype: 'tab1',
            pages: this.accountPages
        }, {
            title: 'Tab 2',
            iconCls: 'tab2',
            xtype: 'tab2',
            pages: this.accountPages
        },
        grid];
    } else {
        this.on('render', function(){
            this.el.mask('No internet connection.');
        }, this);
    }

    appname.App.superclass.initComponent.call(this);
}

});

The app normally loads just fine, but with the addition of grid, it breaks and nothing loads.

Syntactically, should I be defining grid inside the app instantiation like A) grid: ..., B) this.grid = new ..., or C) as I have it as a regular var named grid?

Many thanks.

There is no inbuilt GridPanel comes with Sencha Touch. So, that Ext.grid.GridPanel will not work here. However, you can use Simoen's TouchGrid extension from here.

All the source codes are available here.