I have isolated the issue, and this is my code.... Can someone please throw some light on this, I'am stuck with this, appreciate your help.
Code:
Ext.BLANK_IMAGE_URL = 'images/s.gif';
rowViewer = {};
Ext.onReady(function(){
    
    Ext.QuickTips.init();

    /* Header with toolbar */
    var hd = new Ext.Panel({
        border: false,
        layout:'anchor',
        region:'north',
        cls: 'docs-header',
        height:60,
        items: [{
                 xtype:'box',
                 el:'header',
                 border:false,
                 anchor: 'none -25'
                 }
               ]
        });
        
        //var theGrid = new Rial.exp.DataGrid();
        var theGrid    = new Rial.exp.olPanel();
        
        var viewport = new Ext.Viewport({
          layout    : 'border',
          title        : 'PM',
          items        : [hd,{
                  id      : 'menu-tree',
                  region    : 'west',
                  html    : 'Menu here'
          },/*{
              id        : 'main-tabs',
              region    : 'center',
              html    : 'App here'
          }*/
          theGrid
          ],
          renderTo    : Ext.getBody()
        });        

});    

Ext.namespace('Rial.exp');
Rial.exp.DataGrid = Ext.extend(Ext.Panel, {

    //region        : 'center',
    
    layout                : 'border',
    border                : false,
        
    initComponent: function(){
        //debugger;
        // init store
        this.initStore();
        // init (ext) grid
        this.initGrid();
        this.initLayout();
        //debugger;
        Rial.exp.DataGrid.superclass.initComponent.call(this);    
    },    
    initStore: function() {
        // sample static data for the store
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am']
        ];
        // create the data store
        this.store = new Ext.data.ArrayStore({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]
        });
        // manually load local data
        this.store.loadData(myData);

    },       
    initGrid: function() {
        
        // init view
        var view =  new Ext.grid.GridView({
            getRowClass: this.getViewRowClass,
            autoFill: true,
            forceFit:true,
            ignoreAdd: true,
            emptyText: 'No items to display.', //String.format(Rial.Rialbase.tranlation._("No {0} where found. Please try to change your filter-criteria, view-options or the {1} you search in."), this.i18nRecordsName, this.i18nContainersName),
            onLoad: Ext.emptyFn
        });
        
        //this.grid = new Grid(Ext.applyIf(this.gridConfig, {
        this.grid = new Ext.grid.GridPanel({
            border: false,
            store: this.store,
            columns: [
                {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
                {header: 'Price', width: 75, sortable: true, dataIndex: 'price'},
                {header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
                {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
                {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            height: 100,
            //sm: this.selectionModel,
            view: view
        });     
    },    
    initLayout: function() {
        this.items = [
        {
            region    : 'center',
            xtype    : 'panel',
            layout    : 'fit',
            border    : false,
            //bbar    : this.pagingToolbar,           
            items    : this.grid
        }];
        
        this.filterToolbar = new Ext.Panel({
                border    : true,
                region    : 'north',
                html    : 'This could potentially be a filter tool bar'
        });

        this.items.push(this.filterToolbar);
        this.filterToolbar.on('bodyresize', function(ftb, w, h) {
            alert('Shake me!');
            if (this.filterToolbar.rendered && this.layout.rendered) {
                this.layout.layout();
            }
        }, this);
                    
    }    
});

Rial.exp.olPanel = function(){
    this.preview = new Ext.Panel({
        id: 'preview',
        region: 'south',
        cls:'preview',
        autoScroll: true,
        tbar: [{
            id:'tab',
            text: 'Approve',            
            disabled:true,
            //handler : this.openTab,
            scope: this
        },
        '-',        
        {
            id:'win',
            text: 'Reject',
            disabled:true,            
            scope: this
        },        
        '->',
        {            
            id:'print',
            text: 'Print',
            iconCls: 'icon-print',
            disabled:false,
            scope: this
        },
        '-',
        {            
            id:'pdf',
            text: 'PDF',
            iconCls: 'icon-pdf',
            disabled:false,
            scope: this
        }],

        clear: function(){
            this.body.update('');
            var items = this.topToolbar.items;
            items.get('tab').disable();
            items.get('win').disable();
        }        
    });    
      this.grid = new Rial.exp.DataGrid();  
      
    this.listing = new Ext.Panel({
        id        : 'listing',
        region    : 'center',
        tbar    : [{
                    id:'add-record',
                    text: 'New Request',
                    iconCls: 'new-tab',
                    disabled:true,
                    //handler : this.openTab,
                    scope: this
                },'-',{
                    id:'delete-record',
                    text: 'Delete',
                    iconCls: 'new-tab',
                    disabled:true,
                    //handler : this.openTab,
                    scope: this                    
                }],
        items    : [this.grid]
    });      
      
    Rial.exp.olPanel.superclass.constructor.call(this, {
        id:'main-tabs',
        activeTab:0,
        region:'center',
        margins:'0 5 5 0',
        resizeTabs:true,
        tabWidth:150,
        minTabWidth: 120,
        enableTabScroll: true,
       
        plugins: new Ext.ux.TabCloseMenu(),
        items: {
            id:'main-view',
            layout:'border',
            title:'Loading...',
            hideMode:'offsets',
            items:[
                this.listing, {
                id:'bottom-preview',
                layout:'fit',
                items:this.preview,
                height: 250,
                split: true,
                border:false,
                region:'south'
            }, {
                id:'right-preview',
                layout:'fit',
                border:false,
                region:'east',
                width:350,
                split: true,
                hidden:true
            }]
        }
    });
};

Ext.extend(Rial.exp.olPanel, Ext.TabPanel, {
    loadItem : function(menuItem){
        //this.grid.loadData(menuItem.url);        
        //this.grid.loadData('tickets-active.json');        
        //rowViewer.setTemplate("Pass the template to this function");
        Ext.getCmp('main-view').setTitle('menuItem.text');
        //alert(Ext.getCmp('main-view').id);
        this.setActiveTab('main-view');
    }
});