Grid panel: Howto toggle fullscreen

[nowrap]

Hello,
i've a grid panel and added via tools a fullscreen button. The handler opens a new Ext.Window and has as item the grid itself. After clicking the button the grid is transfered to the window. But the window has scrollbars and is grown wider and higher.

Do i need to override the calculated width and height for the fullscreen property or the show().maximize() function?

And i've troubles to the transfer the grid back to it's old place and dimensions after closing the window. Within the beforehide event i've use the following code:

window.items.first().el.appendTo(Ext.get(grid.renderTo));

window is the Ext.Window and grid the Ext.grid.Panel.

The grid is placed to it's old position but the tools bar keeps it's width from the window and some buttons aren't rendered correctly anymore.

Does someone have similiar problems solved or created another solution for a grid fullscreen toogling?

Regards
nowrap

[scottmartin]

Can you please provide a small working example of what you are trying to achieve?

Regards,
Scott.

[nowrap]

I can provide the tools code sample from my grid:

tools: [{
type: 'maximize',
tooltip: 'Maximieren',
handler: function(event, toolEl, panel) {
var win = new Ext.Window({
title: "Vollbild-Modus",
autoScroll: false,
closeAction: 'hide',
constrainHeader: true,
resizable: false,
floatable: false,
items: [grid],
listeners: {
show: function(window, eOpts) {
grid.tools.maximize.hide();
},
beforehide: function(window, eOpts) {
console.log("beforehide");
window.items.first().tools.maximize.show();
window.items.first().el.appendTo(Ext.get(grid.renderTo));
//window.items.first().el.setWidth(500);
//window.items.first().el.repaint();
},
hide: function(window, eOpts) {
console.log("hide");
}
}
});
win.show().maximize();
}
}],

The grid itself is part of an nonpublic ajax driven application. The variable grid contains the created Ext.grid.Panel.

Does this info help?