View Full Version : Grid resizes in width but not in height

23 Aug 2007, 4:01 AM

I have a problem with a grid in a Layout dialog.
When I resize my layout dialog, the method grid.autoSize() is called.
That works. My grid width resizes to the width of the container.
But not the height. In my Attachment you can see what I mean.

The next is, when I load the data of the grid, the grid height would be on 100%.
Then, I see a grey background (of the list?) fitting to the dialog size.

What can I do?

I render my grid on the dialog.body and resize the grid on dialog.resize()...

23 Aug 2007, 4:21 AM
You need to create a GridPanel from your Grid, and add that to the Region.

23 Aug 2007, 4:29 AM
No that doesn't work too. I had that so before. Should I have some special configuration to the gridPanel. Does the grid Panel should have an HTML-Element? Should the HTML element have some special style configuration?

23 Aug 2007, 5:01 AM
You have to create the Grid in a seperate DOM element. Then wrap that in a GridPanel, then add that to a Region in a Layout. My Grids all resize.

23 Aug 2007, 10:16 AM
@Animal: How do you do this?

I have the same problem.

23 Aug 2007, 11:31 PM
Create a <div>

Render a Grid to that.

Pass the Grid to the constructor of GridPanel.

Add the GridPanel to a Region using the Region's add() method.

27 Aug 2007, 6:23 AM
I tried this with another approach.
I create a element DIV at the document.body and after I move his to the dialog.

But the problem still have.

var self = T5.Dialogs.ClientesContatos;
var NomeLista = 'D_ClientesContatos';

if ( !self[NomeLista] ) {
self[NomeLista] = new Ext.BasicDialog(NomeLista, {
autoCreate:true, width:700, height:375, resizable: true,
dragable:true, proxyDrag:true, title:"Contatos", modal: true
self[NomeLista].addKeyListener(27, self[NomeLista].hide, self[NomeLista]);
self[NomeLista].addButton('Adicionar contatos selecionados', self.Adicionar, self);

Ext.form.Field.prototype.msgTarget = 'side';


var gridContainer = Ext.get('desktop').createChild({
style: "width: 100%; height: 312px"

self[NomeLista].on('hide', function() {
self[NomeLista] = null;