web-dev-qa-db-ja.com

ExtJS-塗りつぶしと自動高さ

ExtJS（html/css）を使用していますが、レイアウトに関する質問があります。例：

|--------|
|        |
|        |
|        |
|        |
|        |
|--------|
|        |
|        |
|--------|

結合された高さ（パディング、マージンなどはありません）は、親コンテナーの100％です。できれば、それは2つのパネルどういうわけか互いに積み重ねられています。

問題は、I 高さがわからない上部パネルと下部パネルのどちらでもないことです（固定されておらず、パネル内のコンテンツが変更される可能性があるため、変更される可能性があります。2つのメニューです。）I トップパネルから塗りつぶし残りのスペースを削除するか、必要に応じてスクロールバーが必要です。

ソリューションが純粋なExtJSであることはそれほど重要ではありません。2つのパネルのコンテナーがExtJSパネルであり、内部の2つのパネルのコンテンツがjavascriptによって駆動されるプレーンなhtmlであるということだけです。

どこから始めればよいか手がかりを持っている人はいますか？

編集
問題の一部は「サイズ変更」イベントの欠如だと思います。半動的/静的な解決策で逃げて、下のパネルの高さを計算してみることができると思います

javascripthtmlcssdomextjs
10
Onkelborg

これは簡単に解決できる問題ではありません。問題の説明によると、パネル2にはautoHeight: trueが必要ですが、それに応じてトップパネルのサイズを自動的に設定するようにブラウザまたはExtに指示する方法はありません。

私が思いつくことができる最善のことは、タイマーで手動でそれを行うことです：

  • 絶対レイアウト、固定高さで両方のパネルの外部コンテナを作成します。カスタムの「position：relative」スタイルを適用します。
  • パネル1にはconfig x: 0, y: 0, anchor: "100% 100%", autoScroll: trueがあります
  • パネル2はautoHeight: trueでカスタムstyle: "top: auto; bottom: 0"
  • パネル2の高さをチェックし、その高さをパネル1のパディングボトムスタイルに割り当てる1秒程度の間隔でタスクを実行します。
2
divestoclimb

もっと簡単な方法があるかもしれません。 ExtJS 4（3でテストしていませんが、機能する可能性があります）で、子アイテムのflexが0またはundefinedレイアウトマネージャーはそのアイテムの高さを調整しません。

したがって、あなたの例では、上部パネルのflexは1で、下部パネルのflexは0です。

Ext.create("widget.panel", {
  renderTo: Ext.getBody(),
  height: 300, width: 400,
  layout: { type: 'vbox', pack: 'start', align: 'stretch' },
  items: [{
    // our top panel
    xtype: 'container', 
    flex: 1,             // take remaining available vert space
    layout: 'fit', 
    autoScroll: true, 
    items: [{ 
      xtype: 'component', 
      // some long html to demonstrate scrolling
      html: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
    }] 
  },{ 
    // our bottom panel
    xtype: 'container', 
    flex: 0,             // dont change height of component (i.e. let children dictate size.)
    items: [{ 
      xtype: 'button', 
      height: 200, 
      text: 'Hello World'
    }]
  }]
});

これで、下部パネルは子コンポーネントの高さだけを取得し、上部パネルは残りの使用可能な高さを取得します。

7
Andy

'layout'および 'flex' ExtJSフィールドの代わりにCSSトリック（ 'max-height' CSSフィールド）を使用することもできます。そのためには、スクロール可能である必要がある要素に次の行を追加するだけです。

bodyStyle: { maxHeight: '300px' },
autoScroll: true,

ExtJS3.4.0でテスト済み。

3
user2648222

質問が正しければ、2つのパネルは、コンテンツがない限り固定サイズにするべきではありません。コンテンツがある場合は、スクロールしますか？通常、パネルの少なくとも1つは「マスター」コンテンツを表し、固定サイズであることをお勧めします。それ以外の場合、これは機能するはずです。

layout:'vbox',
layoutConfig: {
    align : 'stretch',
    pack  : 'start',
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', flex:2}
]

その構成を「holding」要素に指定し、適切と思われるように「panel1」と「panel2」を設定します（つまり、「{html： 'panel 1'、flex：1}」をコンポーネントの名前に置き換えます）

3
SW4