Ext JS：帶動態高度調整容器的圖像

Question

我有一張圖像列表，可以從中進行選擇，並且每個圖像都有不同的尺寸。爲了保持寬高比，我只設置了圖像的寬度，所以瀏覽器決定了圖像的高度。不幸的是，因爲我沒有高度，Ext JS不確定給容器的高度，所以它不會在第一個圖像被渲染後更新它。

在下面的示例中，您將看到第一個圖像正確渲染並設置了面板正文的高度。如果您選擇組合框中的其他圖像，它不會設置高度，它會被切斷。但是，如果取消註釋bodyCls屬性並重新運行該示例，它將按照它的行爲進行操作......圖像選擇會動態改變面板的高度。

這似乎有點哈克給我，我不喜歡直接使用float: left，但我想在hbox的方式進行佈局這些項目，所以我不知道是否有完成這個更好的方法。有人有更好的解決方案嗎？

不，我不想用object-fit或background-size: cover;

這裏的Fiddle和代碼：

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     var f = Ext.create('Ext.form.Panel', { 
      renderTo: Ext.getBody(), 
      border: true, 
      bodyStyle: 'border-color: blue !important;', 
      height: 'auto', 
      referenceHolder: true, 
      // layout: { 
      //  type: 'hbox', 
      //  columns: 2 
      // }, 
      // layout: 'fit', 
      defaults: { 
       style: 'float: left;' 
      }, 
      // This style add height: 100% to the body 
      // bodyCls: 'blah', 
      margin: 5, 
      bodyPadding: 5, 
      viewModel: { 
       stores: { 
        logosStore: { 
         autoLoad: true, 
         proxy: { 
          url: 'data1.json', 
          type: 'ajax' 
         } 
        } 
       } 
      }, 
      items: [{ 
       xtype: 'image', 
       width: 200, 
       reference: 'blah', 
       hidden: true, 
       bind: { 
        src: '{record.logoSrc}', 
        hidden: '{!record.logoSrc}' 
       } 
      }, { 
       xtype: 'combobox', 
       valueField: 'logoFileId', 
       displayField: 'name', 
       queryMode: 'local', 
       forceSelection: true, 
       margin: '0 0 0 40', 
       value: 2, 
       listConfig: { 
        itemTpl: '<img src="{logoSrc}" style="max-height: 40px;" />' 
       }, 
       bind: { 
        store: '{logosStore}', 
        selection: '{record}' 
       }, 
       listeners: { 
        select: function (combo, record) { 
         f.getViewModel().notify(); 
         // f.setHeight(f.lookupReference('blah').getHeight()); 
         // f.lookupReference('blah').getEl().dom.setAttribute('background-image', 'url("' + record.get('logoSrc') + '")'); 
        } 
       } 
      }] 
     }) 
    } 
}); 

編輯 我的解決方案開始分解，當你有我的成分是與其他幾個組件一起用於另一個容器。請參閱Fiddle，但如果取消MyForm組件中的cls屬性，則它可以正常工作......我似乎錯誤地認爲必須將height: 100% !important添加到所有內容中。就像也許有一個我可以用來替代的佈局。

Answer 1

我確實想出了一個解決方案，那就是使用一點JavaScript ......我基本上等待圖像加載，獲取圖像的當前高度，並更新其容器的maxHeight，所以它可以將其高度報告回其父容器。最奇怪的是，如果maxHeight低於一定的閾值，我想保持在150，如果閾值被擊中兩次或更多，當我做setMaxHeight(150)時，它實際上並沒有更新圖像的高度。這就是爲什麼我setMaxHeight(null)第一次如果門檻沒有得到滿足。例如，我先選擇了第二張圖片，然後是第三張圖片......如果我沒有setMaxHeight(null)，第三張圖片將被截斷。

我認爲這是一個可以接受的解決方案，但再一次，我想知道是否有佈局會爲我做這件事，或者我不理解某個佈局或嵌套組件。

Fiddle和代碼：

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     Ext.define('MyForm', { 
      extend: 'Ext.form.Panel', 
      alias: 'widget.myForm', 
      border: true, 
      bodyStyle: 'border-color: blue !important;', 
      referenceHolder: true, 
      scrollable: true, 
      layout: 'fit', 
      margin: 5, 
      bodyPadding: 5, 
      tools: [{ 
       xtype: 'button' 
      }], 
      viewModel: { 
       stores: { 
        logosStore: { 
         autoLoad: true, 
         proxy: { 
          url: 'data1.json', 
          type: 'ajax' 
         } 
        } 
       } 
      }, 
      items: [{ 
       xtype: 'container', 
       reference: 'blah2', 
       scrollable: true, 
       height: 150, 
       maxHeight: 150, 
       layout: { 
        type: 'hbox' 
       }, 
       items: [{ 
        xtype: 'image', 
        width: 200, 
        reference: 'blah', 
        hidden: true, 
        bind: { 
         src: '{record.logoSrc}', 
         hidden: '{!record.logoSrc}' 
        }, 
        listeners: { 
         el: { 
          load: function() { 
           f.getViewModel().notify(); 
           var blah2 = f.lookupReference('blah2'); 
           var height = f.lookupReference('blah').getHeight(); 
           if (height < 150) { 
            height = 150; 
            blah2.setMaxHeight(null); 
           } 
           console.log(blah2.setMaxHeight(height), height); 
          } 
         } 
        } 
       }, { 
        xtype: 'combobox', 
        valueField: 'logoFileId', 
        displayField: 'name', 
        queryMode: 'local', 
        forceSelection: true, 
        margin: '0 0 0 40', 
        value: 2, 
        width: 350, 
        listConfig: { 
         itemTpl: '<img src="{logoSrc}" style="max-height: 40px;" />' 
        }, 
        bind: { 
         store: '{logosStore}', 
         selection: '{record}' 
        } 
       }] 
      }] 
     }); 
     var f = Ext.create('MyForm', { 
      renderTo: Ext.getBody() 
     }); 
    } 
});