View Full Version : Problem with Height with Grid resizing

20 Aug 2007, 8:46 PM
Been having trouble with this for more than a week and still haven't figured out a solution to this problem:

Basically, I have a TabPanel that has a tab:


var jtabs = new Ext.TabPanel('jtabs');

var classTab = jtabs.addTab('classes-tab', "Classes");
classTab.getUpdateManager().loadScripts = true;
classTab.setUrl('./view.html', null, true);


<div id="container" class="xp" style="position:relative;height:100%;width100%" >
<div id="jtabs" class="xp" style="height:100%"></div>

dbview.js - here's teh javascript associated with view.html

Ext.onReady(function() {
BCDBLayout = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(Ext.get('class-container'), {
east: {
split: false,
initialSize: 265,
autoScroll: false,
titlebar: true,
collapsible: false,
minSize: 100,
maxSize: 1000
center: {
split: false,
initialSize: 735,
titlebar: true,
collapsible: false,
minSize: 400,
maxSize: 1000

layout.add('center', new Ext.ContentPanel('main', {title: 'Binary Compatibility DB', fitToFrame:true, closable:false}));
layout.add('east', detailsPanel = new Ext.ContentPanel('details-class', {title: 'Details', fitToFrame:true}));


document.getElementById('class-container').style.height = document.body.clientHeight - heightOffset + "px";
document.getElementById('main').style.height = document.body.clientHeight - heightOffset + "px";
document.getElementById('grid').style.height = document.body.clientHeight - heightOffset + "px";
document.getElementById('classes-tab').style.height = document.body.clientHeight - heightOffset + "px";


setHeight : function() {
document.getElementById('class-container').style.height = document.body.clientHeight + "px";
document.getElementById('main').style.height = document.body.clientHeight + "px";
document.getElementById('grid').style.height = document.body.clientHeight + "px";
Ext.EventManager.onDocumentReady(BCDBLayout.init, BCDBLayout, true);
Ext.EventManager.onWindowResize(BCDBLayout.setHeight, BCDBLayout, true);

dbview.html -

<script type="text/javascript" src="./includes/javascript/dbview.js"></script>
<div id="class-container" style="border:0px none;overflow:overflow;width:100%;height:700px;padding-bottom:0px;position:relative" >
<div id="main" style="border:0px none;overflow:overflow;width:100%;height:100%;">
<div id="grid" style="border:0px none;overflow:overflow;width:100%;height:100%;"></div>

Basically, my problem is that while with BorderLayout, I must assign a fixed height to the div. I understand that, so what I'm trying to do here is changing the div based on the body's clientHeight so that it is somewhat dynamic.

However, this approach works on the first load. Upon refreshing, it the grid doesn't resize.

Firebug gets pretty confusing as some divs you could inspect and some you couldn't after resizing and so it has added to the complexity of this problem.

Any Ideas?

20 Aug 2007, 8:48 PM
this is how i declared my grid:

// create the editor grid
grid = new Ext.grid.Grid('grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true,
autoHeight: true

// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('grid', {
handles: 's'
rz.on('resize', grid.autoSize, grid);