Extjs 4 拉伸嵌套面板

发布于 2024-11-18 20:22:19 字数 1245 浏览 3 评论 0原文

我在调整页面大小时遇到​​问题。我在 div 内有一个树面板,嵌套在 html-table 内。我不使用 ext Container,因为我有复杂的 UI 设计,我无法用 Ext 实现。所以我希望我的树面板在调整窗口大小时按高度调整大小。请帮我。

表标记:

  <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>

树代码:

        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

});

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

});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

幸福不弃 2024-11-25 20:22:20

尝试对 Ext.tree.Panel 使用:height: document.getElementById('tree_div').clientHeight。我认为这不是最好的变体,但它对我有用。

祝你好运!

Try to use this: height: document.getElementById('tree_div').clientHeight for the Ext.tree.Panel. This is not the best variant, I think, but it worked for me.

Good luck!

孤君无依 2024-11-25 20:22:19

使用

autoHeight: true

而不是

height: 500

use

autoHeight: true

instead of

height: 500

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文