View Full Version : Grid with Display none is not working

5 Dec 2011, 6:19 AM
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() {


{ xtype: 'button', text: 'Hide',
handler : function() {



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.

5 Dec 2011, 6:45 AM
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?