0

我正在努力获得 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 字符串，但这是一个可怕的 hack。建议表示赞赏；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;​ ">​…​&lt;/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>'    
        }]
        },{
4

1 回答 1

1

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

另外，作为百分比的宽度也没有记录为 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
于 2012-05-25T02:00:56.140 回答