PDA

View Full Version : pagination not displayed in tabpanel



hunt
21 Mar 2011, 2:59 AM
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


<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



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();
}
}]
})

});