Question

我有一个侧边菜单，第一个项目是图像，之后我有一个触发器和一个tabpanel。问题是，当您访问屏幕时，触发器区域和选项卡面板位于图像上方，当在选项卡面板上单击时，则会在屏幕上调整项目。如何在打开屏幕时对齐字段？

https://gyazo.com/9d896a46d800812e23df68aaf5e804b9

Answer 1

在没有看到代码的情况下很难确定，但这可能是因为图像在初始布局时没有加载。如果您知道图像的尺寸，可以通过设置高度来快速修复。

它也可能是您正在使用的布局 - 我会建议使用vbox。

在我的示例中，我在网址中包含一个随机数，以确保它不会被缓存：

Ext.define('MyApp.view.Main',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',
    layout:{
        type:'vbox'
    },
    items:[
        {
            xtype:'image',
            height:92,
            width:'auto',
            src:'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?'+Math.random()
        },
        {
            xtype:'combo',
            store:['A','B','C']
        },
        {
            xtype:'tabpanel',
            flex:1,
            width:'100%',
            items:[
                {
                    title:'Test',
                    html:'foo'
                }
            ]
        }
    ]
})

为了使图像宽度适合父面板，您可以使用minWidth和minHeight：

Ext.define('MyApp.view.Main',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',
    layout:{
        type:'vbox'
    },
    items:[
        {
            xtype:'image',
            minHeight:92,
            minWidth:272,
            width:'100%',
            src:'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?'+Math.random()
        },
        {
            xtype:'combo',
            store:['A','B','C']
        },
        {
            xtype:'tabpanel',
            flex:1,
            width:'100%',
            items:[
                {
                    title:'Test',
                    html:'foo'
                }
            ]
        }
    ]
});

或者你可以使用调整大小的侦听器：

Ext.define('MyApp.view.Main',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.main',
    layout:{
        type:'vbox'
    },
    items:[
        {
            xtype:'image',
            width:'100%',
            src:'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png?'+Math.random(),
            listeners:{
                resize:function(){
                    //ratio = originalWidth/originalHeight;
                    var ratio = 272/92;
                    this.setHeight(this.getWidth()/ratio)
                }
            }
        },
        {
            xtype:'combo',
            store:['A','B','C']
        },
        {
            xtype:'tabpanel',
            flex:1,
            width:'100%',
            items:[
                {
                    title:'Test',
                    html:'foo'
                }
            ]
        }
    ]
});

项目叠加在图像extjs上

1 个答案: