私は ExtJS4 で作業しています。ボーダー レイアウトの東の領域を自動高さにしたいところに行き詰まりました。実際、私の要件は、その中の子要素のコンテンツに基づいて、任意の領域の高さを自動的に増やすことです。私はたくさん試しましたが、解決策が得られませんでした。何か提案をください。
私のコードでは、東地域に 5 つのパネルを含む単純なコードをテストしているだけで、これらの 4 つのパネルのうち表示されます。5 番目のパネルが表示されないのですが、表示するにはどうすればよいですか? 参考までにサンプルコードを使用しています。
これが私のビューポートコードです:
Ext.define('Am.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id:'viewportId',
alias:'widget.Viewport',
autoScroll:true,
// closable:true,
items: [
{
region:'north',
items:[
{
xtype:'panel',
flex:.2,
title:'north region',
html:'<p>north region'
}
]//end of items
},
{
region:'west',
id:'westId',
//margins:'0 5 5 5',
flex:.3,
//layout:'accordion',
items:[
{
title:'This day in a history',
xtype:'Content'
}
]//end if items
},// end of region west
{
//title:'center',
region:'center',
id:'centerId',
//html:'center region',
items:[
]//End of itmes
},// end of region center
{
region:'east',
id:'eastId',
//margins:'0 5 0 5',
flex:.3,
//layout:'accordion',
items:[
{
xtype:'panel',
title:'panel1',
html:'hi<br>hello<br>good<br><br><br><br><br>morning<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel2',
html:'hi<br>hello<br>good<br><br><br><br<br>noon<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel3',
html:'hi<br>hello<br>good<br><br><br><br><brafter noon<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel4',
html:'hi<br>hello<br>good<br><br><br><br><br><br><brnigth<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel5',
html:'good bye'
},
]//end if items
},
{
//title:'South',
region:'south',
id:'southId',
items:[{
xtype:'panel',
title:"footer",
html:'footer '
}]
},//mainMenu // used mainMenu when you are using mainMenu variable
]//end if items
});//End of view port
そして、ここに私のスクリーンショット出力があります:
子コンポーネント panel5 は表示されません。どうすれば見えるようにできますか？この要件を持つすべてのパネルを表示するにはどうすればよいですか? パネルのコンテンツに基づいて、東の領域のサイズを自動的に大きくしたいと考えています。
何か提案をください。
