调整大小时面板上的 extjs 100% 宽度答案

【问题标题】：extjs 100% width on panel when resize调整大小时面板上的 extjs 100% 宽度
【发布时间】：2013-08-07 20:44:26
【问题描述】：

我在一个宽度为 50% 的页面中有一个 div。我使用 renderTo 将面板附加到此 div，但是当我更改窗口大小时，我的面板不会调整大小而只是保持原始大小。

var vp = Ext.create('Ext.panel.Panel',{                      
                     plugins : ['fittoparent'],                      
                     height: 400,
                     layout: 'fit',
                     flex:1,
                     renderTo: Ext.get("scheduler-container"),                               
                     items:[
                         { 
                             xtype: 'resource-list',
                             layout : 'fit',                                
                             resource: resourceResponse,
                             event: eventResponse,
                             serverDateFormat: serverDateFormat,
                             startViewRange:  startDate,               
                             endViewRange: endDate,
                             readOnlyView: true,
                             showCurrentTime: true,
                             dateToScrollTo: now,
                             getEvents: ResourceScheduler.getAllEvents,
                             getResources: ResourceScheduler.getResources,
                             timeZoneOffset: timeZoneOffset
                         }
                     ]
                 });

我遇到了这个 http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent&highlight=resize'>插件并尝试了它是否有效。不幸的是，它仅在扩展窗口时有效，但在缩小窗口时无效。我想知道是否有人成功制作了 100% 宽 x 100% 高的面板。

【问题讨论】：

标签： extjs

【解决方案1】：

抱歉，这个插件 (http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent&highlight=resize) 确实有效。我已经这样设置了我的页面

<table>
<tr> 
<td style='width: 50%'>
  <div id='scheduler-container'></div>
</td> 
<td style='width: 50%'></td>
</tr>
<table>

然而，用 div 替换 table 后它工作了！所以修改后是这样的

<div class='float-left'>
<div id='scheduler-container' style='width:50%'></div>
</div>
<div class='float-left' style='width:50%'>
</div>
<div class='float-clear'></div>

我希望这对一些遇到的问题有用。我不经常使用表格，但一些 Salesforce ui 组件呈现为表格，所以我遇到了这个问题。

【讨论】：

【解决方案2】：

你可以使用resize事件函数

resize: function (component, adjWidth ) {
          console.log("resized") ;
        }

您将在这些组件 adjWidth 中获得所需的参数，并使用它。使用有效的条件语句，您可以相应地设置身高和体重

你得到高度和宽度组件.dom.style.height,

component.dom.style.width

【讨论】：

【解决方案3】：

试试这些配置

宽度：“100%”

身高：“100%”

【讨论】：

面板不接受宽度和高度的百分比。