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());
        }
    },

我最初受到鼓励我可能有两种方法可以通过dom节点或通过componentLayout.lastComponentSize来获取高度，但Javascript代码只能访问Chrome控制台。我最后的尝试是解析返回的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

将ExtJS面板的高度用作边界区域

1 个答案: