Question

我需要一些帮助才能在Viewport的“北”面板中插入图像。

问题是，在页面加载时，北区域的大小设置为默认值：20px。结果，只有一部分图像可见。我希望它根据图像高度进行调整。

但是当我点击分割面板时，它会根据图像的大小进行调整（在加载时似乎有些渲染问题？）

以下是ext js代码..使用Ext Js 5.0

Ext.create('Ext.container.Viewport', {
    renderTo: Ext.getBody(),
    layout: 'border',

    items: [
    {
        region: 'north',
        html: '<img src="..." alt="" />',
        border: false,
        margin: '0 0 0 0',
    },{
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Contents',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }
    ]
});

提前致谢！

Answer 1

第一个问题是，当您使用边框布局时，需要的项目很少：

使用Border布局的任何Container必须包含一个带有region：＆＃39; center＆＃39;的子项。中心区域中的子项目将始终调整大小以填充布局中其他区域未使用的剩余空间。
具有西部或东部区域的任何子项都可以配置初始宽度或Ext.layout.container.Box.flex值，或初始百分比宽度字符串（简单地除以100并使用作为弹性值）。＆＃39;中心＆＃39; region的flex值为1.
具有北部或南部区域的任何子项都可以配置初始高度或Ext.layout.container.Box.flex值，或初始百分比高度字符串（简单地除以100并使用作为弹性值）。＆＃39;中心＆＃39; region的flex值为1.

有关详细信息，请参阅doc。

因此我将面板更改为hbox，使用flex: 1设置主容器并添加一些逻辑以确保在加载图像时更新容器的布局以修复它的高度。

下面的代码，希望它有所帮助：

Ext.create('Ext.container.Viewport', {
    renderTo: Ext.getBody(),
    layout: 'vbox',

    items: [
        {
            border: false,
            margin: '0 0 0 0',
            items : [{
               xtype : 'image',
               src : 'http://cdn.sencha.io/img/touch2/Sencha-SDK-Tools-icon.png',
               listeners : {
                    boxready : function (component) {
                        component.getEl().on('load', function(){
                            component.ownerCt.updateLayout();
                        });
                    }
                }
            }],
            layout: {
                type: 'anchor'
            }
        },{
            flex: 1,
            xtype: 'tabpanel', // TabPanel itself has no title
            activeTab: 0,      // First tab active by default
            items: {
                title: 'Contents',
                html: 'The first tab\'s content. Others may be added dynamically'
            }
         }
    ]
});

在视口中使用Ext JS Image

1 个答案: