How can I make a panels contents resize with a zoom control?

Question

I am using ExtJS 3.3 I have a main panel containing another panel (containing text) and a grid containing data with a paging toolbar and footer.
There is a zoom control (a combo with values like "100%, "50%", "page width","whole page" ) on the paging toolbar.
I wish to select a zoom level from the combo and have everything on the main panel resize to that zoom level.
I need all other panels on the page to appear unchanged in size.
I have Googled around but cannot see any solutions or extensions available.
How can I do this please? Any ideas?

Answer 1

You should be able to do this using CSS to define the size of each element at each required zoom level. Your combo zoom control would need to have an event handler which would switch the class of the (probably) DIV element which contains the content you want to resize.

There is a StackOverflow question here which is a useful discussion about some ways to acheive the scaling; there are many ways to do it and your choice depends on what you need to acheive. If you provide sight of the display or code you're working on then I could probably make some recommendations.