Элементы, наложенные на изображение extjs

Question

У меня есть боковое меню, а первый элемент - изображение, после чего у меня есть триггерное поле и вкладка. Проблема заключается в том, что при доступе к экрану триггерное поле и вкладка находятся над изображением, а при нажатии на вкладке, элементы настраиваются на экране. Как это сделать при открытии экрана выравниваются поля?

https://gyazo.com/9d896a46d800812e23df68aaf5e804b9

Answer 1

Не видя код это трудно, чтобы быть уверенными, но это может быть список дел с тем, что изображение не загружено, когда он делает первоначальный макет. Если вы знаете размеры изображения, это можно быстро зафиксировать, установив высоту.

Это может быть также todo с макетом, который вы используете - я бы порекомендовал 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' 
       } 
      ] 
     } 
    ] 
});