叠加在图像上的项目extjs

Question

我有一个侧面菜单，第一个项目是一个图像，然后我有一个触发器和一个tabpanel。问题在于，当您访问屏幕时，触发字段和Tabpanel位于图像上方，并且在单击Tabpanel时，屏幕上的项目将被调整。如何在打开屏幕时将字段对齐？

https://gyazo.com/9d896a46d800812e23df68aaf5e804b9

Answer 1

没有看到它的代码是很难确定，但是这可能与事实，当它的初始布局图像没有被加载待办事项。如果您知道图像的尺寸，可以通过设置高度快速修复。

它也可能与您正在使用的布局待办事项 - 我会为此推荐vbox。

在我的例子我在URL中包括一个随机数，以确保它不会被缓存：

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