画像に重なった項目extjs

Question

私はサイドメニューを持っています。最初の項目は画像で、その後はトリガーフィールドとタブパネルがあります。問題は、画面にアクセスすると、トリガーフィールドとタブパネルが画像上にあり、タブパネル上をクリックすると項目が画面上で調整されることです。どのようにフィールドを整列させる画面を開くときにそれを行うには？

https://gyazo.com/9d896a46d800812e23df68aaf5e804b9

Answer 1

確かに難しいですが、これはそれが最初のレイアウトを行う際に、画像が読み込まれていないという事実とTODOすることができ、コードを見ずに。画像の大きさが分かっている場合は、高さを設定することですばやく修正できます。

あなたが使用しているレイアウトでもできるかもしれません - これは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のを代わりに使用することができ、親パネルに合うようにするために：私の例では

は、私はそれがキャッシュされていないことを確認するためにURLで乱数を含める

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