PDA

View Full Version : Fix the height and width of a grid in a gridpanel



Magicbob
10 May 2007, 11:37 AM
Hello,


I'd like to fix the width and height of my grid in a gridpanel. For the moment my grid take all space in the grid panel and i'd like to have some space between the panel and the grid. Is it possible?

here is my html :



<div id ="container">
<div id="west" class="x-layout-inactive-content"></div>
<div id="north" class="x-layout-inactive-content"></div>
<div id="autoTabs" class="x-layout-inactive-content"></div>
<div id="center2" class="x-layout-inactive-content"></div>
<div id="center1" class="x-layout-inactive-content"></div>
<div id="center3" class="x-layout-inactive-content"></div>
<div id="center4" class="x-layout-inactive-content"></div>
<div id="topic-grid" style="border: 1px solid #99bbe8; overflow: hidden;"><div id="editor-grid"></div></div>
</div>


and here is the js :



layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
layout.add('center', new Ext.GridPanel(grid, {title: 'Internautes', closable: true,margins:{left:5,top:5,right:5,bottom:5} }));
layout.add('center', new Ext.ContentPanel('center4', {title: 'Autres', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.getRegion('west').hide();
layout.endUpdate();

Jacka
10 May 2007, 12:05 PM
Hi!

I think it is possible with a additional style tag:

style="widht:200px; high:150px; ..."

Or you define a margin/padding value for your grid:

<div id="editor-grid" style="margin:5px;"></div>

Kind regards!
Jacka

Magicbob
10 May 2007, 12:52 PM
Thanks for your reply

I have already tried both but it is not working :(

Magicbob

jsakalos
10 May 2007, 2:24 PM
I guess the GridPanel was created to accomplish the behavior you're describing. However, you can enclose the grid in another container(s), style it (padding) and put it to standard ContentPanel.

tryanDLS
10 May 2007, 2:37 PM
Seems to work for me putting style="padding:10px" on the div of my gridpanel.

jsakalos
10 May 2007, 2:44 PM
Tim,

I have tried, I put padding:10px to the container with generated class x-grid and I get attached effect.

Have I styled the wrong container?

tryanDLS
10 May 2007, 2:51 PM
Should have said grid container. Up one level. The one with x-grid-container x-layout-component-panel

jsakalos
10 May 2007, 2:55 PM
Yes, that's it.

Magicbob
10 May 2007, 2:57 PM
I can't make it work. Can i have the html part of your code (with the divs) and the part with gridpanel and contentpanel please?

Thanks

Magicbob

jsakalos
10 May 2007, 3:05 PM
Use firebug to find divs with classes Tim names, click on the <div ... on the bottom left and add new property padding to element style on the bottom right.

Magicbob
10 May 2007, 4:09 PM
It works

Thank you