Grid with Display none is not working

[AtulDawkhare]

Hi there,
I have Grid which is working very fine. Currently I have rendered to one Div tag.
Now the scenario is something like this.
I have 2 Grids to be display on One page, when one Grid is on second should be disabled / Hidden.

My Html code is

<div id="grid1" style="height: 98%; padding: 2px; display: none;"></div>
<div id="grid2" style="height: 98%; padding: 2px; display: none;"></div>

And in ExtJs I have created one Toolbar having two buttons, show / hide

	Ext.create('Ext.toolbar.Toolbar', {
	    renderTo: 'toolbar',
	    width   : 500,
	    items: [
	        { xtype: 'button', text: 'Show',handler : function() {
            	   
	        	alert(grid.isVisible(true)); 
            	  grid.show();
            	   
               	}
               },
               { xtype: 'button', text: 'Hide',
            	   handler : function() {
                	   
            		   grid.hide();
                   	}}
	       
	    ]
	});

Now in the above scenario, when I have put display none, no grid is getting displayed.
And when I checked with isVisible() method is it giving me true, i.e. Gird is visible.

Hope I am able to explain very well here.
Please guide me, If the Div has attribute display none, how Can I display my grid ?
Also what is the best thing to achieved this?

Please correct me , if I am going wrong somewhere.

[tobiu]

the gridpanel itself has the config:

hidden : Boolean
True to hide the component.

Defaults to: false

which should override what you configure in your html.

a more general question: why don't you use a tabpanel?