获取用作边框区域的ExtJS面板的高度

Question

为了获得ExtJS面板的高度，我挣扎着挣扎，唯一的原因是我可以认为它的区别在于它将面板定义为边框区域，因为我已经否则没有这个问题（也许我需要向他们报告一个错误）。我将从一些代码开始，这些代码演示我如何获得高度，结果展示了什么是高度，ExtJS说的是什么，以及它如何不是使用不同布局的面板的问题（其中之一边境地区内的面板）：

'cmBuildTab #cmProductExplorer': { 
     afterrender: function(productExplorer) { 
      var domNode = Ext.getDom(productExplorer.el), 
       savedSearchesPanel = productExplorer.down('#savedSearchesPanel'); 

      console.log('productExplorer.getHeight(): ' + productExplorer.getHeight()); 
      console.log(productExplorer.componentLayout); 
      console.log(productExplorer.componentLayout.lastComponentSize); 
      console.log(domNode); 
      console.log('domNode.style.height: ' + domNode.style.height); 
      console.log('savedSearchesPanel.getHeight(): ' + savedSearchesPanel.getHeight()); 
     } 
    }, 

我initally鼓励，我可能有一对夫妇的其他方法来获得高度，通过DOM节点，或通过componentLayout.lastComponentSize但这些都不是为Javascript访问代码，只有铬控制台。我最后的尝试将是解析返回的dom字符串，但这是一个可怕的黑客攻击。建议感激;在console.log结果下方是我的视图配置的相关部分。

的console.log结果：

productExplorer.getHeight(): 2 

Ext.Class.newClass 
autoSized: Object 
borders: Object 
calculateDockBoxes_running: false 
childrenChanged: true 
frameSize: Object 
id: "dock-1155" 
info: Object 
initialized: true 
initializedBorders: true 
lastComponentSize: Object 
height: 787 
width: 254 
__proto__: Object 
layoutBusy: false 
layoutCancelled: false 
onLayout_running: false 
owner: Ext.Class.newClass 
previousComponentSize: undefined 
targetInfo: Object 
__proto__: Class.registerPreprocessor.prototype 

undefined 

<div id=​"panel-1049" class=​"x-panel x-box-item x-panel-default" role=​"presentation" aria-labelledby=​"component-1198" style=​"margin:​ 0px;​ width:​ 254px;​ height:​ 787px;​ left:​ 0px;​ top:​ 0px;​ ">​…​</div>​ 

domNode.style.height: 

savedSearchesPanel.getHeight(): 151 

查看配置（部分）：

},{ 
     region: 'west', 
     collapsible: true, 
     title: 'Product Explorer', 
     itemId: 'cmProductExplorer', 
     split: true, 
     width: '20%', 
     minWidth: 100, 
     layout: { 
     type: 'vbox', 
     pack : 'start', 
     }, 
     items: [{ 
     collapsible: true, 
     width: '100%', 
     border: false, 
     title: 'Search', 
     itemId: 'savedSearchesPanel', 
     items: [{ 
      border: false, 
      xtype: 'cmSearchTermAccordionPanel' 
     },{ 
      border: false, 
      margin: '5 20 0 20', 
      html: 'Saved Searches:<hr>'  
     }] 
     },{ 

Answer 1

afterrender是不是你要用来确定部件的高度的情况下，它激发的元素时在他们被定大小后不会被渲染。如果您使用的是4.1，则可以使用boxready事件，该事件仅在容器的尺寸为http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready时才会触发。如果没有，您可以使用afterlayout事件来确定大小，但该事件触发每个布局。

另外fyi宽度作为百分比没有被记录为4.0支持，我见过他们的工作，我见过他们失败。

这是我从Viewport示例中劫持的一些代码，这要归功于法院的判决，这没关系。
4.1

Ext.create('Ext.container.Viewport', { 
    layout: 'border', 
    items: [{ 
     region: 'north', 
     html: '<h1 class="x-panel-header">Page Title</h1>', 
     border: false, 
     margins: '0 0 5 0' 
    }, { 
     region: 'west', 
     collapsible: true, 
     title: 'Navigation', 
     width: 150, 
     //ADD LISTENERS 
     listeners: { 
      afterrender:function(){console.log('afterrender ' +this.getHeight())}, 
      boxready:function(){console.log('boxready ' +this.getHeight())} 
     } 
     // could use a TreePanel or AccordionLayout for navigational items 
    }, { 
     region: 'south', 
     title: 'South Panel', 
     collapsible: true, 
     html: 'Information goes here', 
     split: true, 
     height: 100, 
     minHeight: 100 
    }, { 
     region: 'east', 
     title: 'East Panel', 
     collapsible: true, 
     split: true, 
     width: 150 
    }, { 
     region: 'center', 
     xtype: 'tabpanel', // TabPanel itself has no title 
     activeTab: 0,  // First tab active by default 
     items: { 
      title: 'Default Tab', 
      html: 'The first tab\'s content. Others may be added dynamically' 
     } 
    }] 
}); 

输出：

afterrender 2 
boxready 276