在视口中使用Ext JS Image(Ext JS Image in Viewport)

在视口中使用Ext JS Image(Ext JS Image in Viewport)

我需要一些帮助才能在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' } } ] });

提前致谢！

I need some help in inserting an image in 'north' panel of Viewport.

The prob is, upon page load, size of north region is set to default: 20px. As a result, only some portion of image is visible. I want it to be adjusted as per the image height.

But as I click on split panels, it adjusts as per the size of image (seems some rendering problem at load?)

following is the ext js code.. Using 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' } } ] });

Thanks in advance!

最满意答案

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

使用Border布局的任何Container必须具有带区域的子项：'center'。 中心区域中的子项目将始终调整大小以填充布局中其他区域未使用的剩余空间。 具有西或东区域的任何子项都可以配置初始宽度，或Ext.layout.container.Box.flex值，或初始百分比宽度字符串（简单地除以100并用作flex值）。 'center'区域的flex值为1。 具有北或南区域的任何子项可以配置初始高度，或Ext.layout.container.Box.flex值，或初始百分比高度字符串（简单地除以100并用作flex值）。 'center'区域的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' } } ] });

First problem is that when you use border layout, few items are required:

Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout. Any child items with a region of west or east may be configured with either an initial width, or a Ext.layout.container.Box.flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1. Any child items with a region of north or south may be configured with either an initial height, or a Ext.layout.container.Box.flex value, or an initial percentage height string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.

See the doc for more info.

So I would change your panel to hbox, set the main container with flex: 1 and add some logic to make sure that when you load the images the container's layout is updated to fix it's height.

Code below, hope it helps:

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' } } ] });