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

Getting height of ExtJS panel used as border region

本文关键字：ExtJS 高度 区域 边框 获取      更新时间：2023-09-26

我正在努力获得 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());
        }
    },
我

最初受到鼓舞，我可能有几个替代方法来获得高度，通过dom节点，或通过componentLayout.lastComponentSize，但Javascript代码都无法访问这些方法，只有chrome控制台可以访问。 然后我的最后一次尝试是解析返回的 dom 字符串，但这是一个可怕的黑客。 感谢建议;在控制台下方.log结果是我的视图配置的相关部分。

控制台.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>'    
        }]
        },{
afterrender不是

要用于确定组件高度的事件，它会在元素渲染时触发，而不是在调整元素大小后触发。 如果您使用的是 4.1，则可以使用 boxready 事件，该事件仅在容器的初始大小 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-event-boxready 触发。 如果没有，您可以使用 afterlayout 事件来确定大小，但该事件会触发每个布局。

此外，仅供参考，作为百分比的宽度没有记录为 4.0 中支持，我已经看到它们有效并且我看到它们失败了。

这是我从视口示例中劫持的一些代码，这要归功于法院裁定这是可以的。
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
相关文章：