Extjs 4 stretching of nested panel

Question

I have a problem with resize of my page. I have a tree panel inside a div, nested inside a html-table. I don't use ext Container, cause I have complex UI-design which I can't realize with Ext. So I want my treepanel to resize by height when window is resized. Please, help me.

Table markup:

  <table id="table_container">
  <tr>
      <td colspan="2" style="height: 30px; valign: top;">
           <div id="menu_div"></div>
      </td>
  </tr>
  <tr>
      <td colspan="2" style="height: 10px;">
           <div id="space_div"></div>
      </td>
  </tr>
  <tr>
      <td style="width:250px; height: 100%; padding-top: 70px;">
         <div id="tree_div" style="valign: top; height: 100%;"></div>
      </td>
      <td rowspan="2" style="padding: 10px;">
          <div id="main_content_div" style="valign: top;">
          </div>
      </td>
  </tr>

Tree code:

        var tree = Ext.create('Ext.tree.Panel', {
        id: 'tree_id',
        store: tree_store,
        width: 250,
        height: 500,
        autoScroll: true,
        renderTo: document.getElementById('tree_div'),
        useArrows: true,
        border: false,
        frame: false,
        rootVisible: true

});

you have set your height to 100% on the div and the cell, what do you think it is 100% of? A table cell expands its height to fit its content not the window, so if you're resizing the window you need to manually reize the tree panel. PS. You're using table for your layout? There is a Table Layout in Ext which does the same thing but would be far better to suit your needs — JamesHalsall
Well, the issue is I have specific background under that table, and because table is transparent, it is visible. Is there an opportunity to do like this in Ext? — BlackLine

Jonas Schmid Jonas Schmid · Accepted Answer · 2011-07-10T10:52:49

0

votes

use

autoHeight: true

instead of

height: 500

Extjs 4 stretching of nested panel

2 Answers