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

EDIT 私のソリューションは、あなたがいる私のコンポーネントを持っていたときにブレークダウンし始めいくつかの他のコンポーネントを持つ別のコンテナで使用されます。このFiddleを参照してくださいが、MyFormコンポーネントのclsプロパティのコメントを外すと機能します...ちょっと間違っているようですが、height: 100% !importantをすべてに追加する必要があります。たぶん私が代わりに使うことができるレイアウトがあります。

Answer 1

私は解決策を思いつきましたが、それは少しJavaScriptを使用することでした...私は基本的に画像がロードされるのを待って、画像の現在の高さをつかんでコンテナのmaxHeightを更新し、その高さを親コンテナに戻すことができます。 1つの奇妙なことは、maxHeightが特定のしきい値を下回っている場合は150に保ちたいとし、しきい値が2回以上ヒットした場合、setMaxHeight(150)を実行しても実際には画像の高さは更新されません。だから私はsetMaxHeight(null)が最初にしきい値に達していない場合です。例として、2番目の画像を最初に選択した後、3番目の画像を選択した場合... 3番目の画像は、私がsetMaxHeight(null)でないと切り取られます。

これは受け入れられる解決策だと思いますが、もう一度、私にはこれを行うレイアウトがあるのか​​、特定のレイアウトや入れ子のコンポーネントを理解していないのでしょうか。 "マージン0 auto" の作品：CSSの

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() 
     }); 
    } 
});