if i place grid inside a tab panel then only on grid is showing the pagination but when i switched to the other tab containing the grid doesn't display pagination. if i put both the grid out side the tab then both the grids are showing pagination perfectly.

HTML CODE

Code:
<div id="tabs1"> <!-- Tab -->
        <div id="groom" class="x-hide-display">    
           <div class="container" style="width:100%">
           <div id="groom-grid"></div> <!-- Grid One -->
      </div>
        </div> 

        <div id="bride" class="x-hide-display">     
        <div class="container" style="width:100%;">
           <div id="bride-grid"></div> <!-- Grid Two -->
        </div>
        </div>
    </div>
JS CODE

Code:
var tabs = new Ext.TabPanel({
            renderTo: 'tabs1',            
            activeTab: 0,
            plain:true,
            defaults:{autoHeight: true},           
            items:[
                {contentEl:'groom', title: 'Groom' },
                {contentEl:'bride', title: 'Bride'}
            ]
    });

var groomGrid = new Ext.grid.GridPanel({
        renderTo: 'groom-grid',
        iconCls: 'icon-grid',
        frame: true,
        title: 'Groom Data',
        height: 500,
        store: storeGroom,
        plugins: [editor],
        columns : userColumns,
        loadMask:true,
        tbar: [{
            text: 'Add',
            iconCls: 'silk-add',
           // handler: onAdd
        }, '-', {
            text: 'Delete',
            iconCls: 'silk-delete',
           // handler: onDelete
        }, '-'],
        viewConfig: {
            forceFit: true
        },
         bbar: new Ext.PagingToolbar({
        pageSize: 25,
        store: storeGroom,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",
        items:[
        '-', {
        pressed: true,
        enableToggle:true,
        text: 'Show Preview',
        cls: 'x-btn-text-icon details',
        toggleHandler: function(btn, pressed){
            var view = grid.getView();
            view.showPreview = pressed;
            view.refresh();
        }
        }]
        })

    });


       var brideGrid = new Ext.grid.GridPanel({
                  renderTo: 'bride-grid',
                  iconCls: 'icon-grid',
                  frame: true,
                  title: 'Bride Data',
                  height: 500,
                  store: storeBride,
                  plugins: [editor],
                  columns : userColumns,
                  loadMask:true,
                  tbar: [{
                      text: 'Add',
                      iconCls: 'silk-add',
                     // handler: onAdd
                  }, '-', {
                      text: 'Delete',
                      iconCls: 'silk-delete',
                   //   handler: onDelete
                  }, '-'],
                  viewConfig: {
                      forceFit: true
                  },            

                bbar: new Ext.PagingToolbar({
                pageSize: 25,
                store: storeBride,
                displayInfo: true,
                displayMsg: 'Displaying topics {0} - {1} of {2}',
                emptyMsg: "No topics to display",
                items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = brideGrid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
                }]
                  })

  });