Extjs 4 拉伸嵌套面板
我在调整页面大小时遇到问题。我在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
尝试对 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!
使用
autoHeight: true
而不是
height: 500
use
autoHeight: true
instead of
height: 500