5

私はExtを学び始め、そのような問題に悩まされました。コード付きのビューポートがあります

Ext.define('WIMM.view.Viewport', {
extend: 'Ext.container.Viewport',
autoScroll: true,
layout: 'anchor',
items: [
    {
        border: false,
        title: 'Header',
        layout: 'fit',
        xtype: 'container',
        html: 'Header block. We\'ll try to do this again'
    },{
        layout: 'border',
        items: [
            {
                collapsible: true,
                width: 240,
                title: 'Aside Column',
                region:'west',
                layout: 'fit',
                html: 'Aside widgets (news, balance, budget, goals) would be here.'
            },{
                title: 'Main Block',
                border: false,
                region:'center',
                layout: 'fit',
                html: 'Main block were tabPanel would be nested in.'
            }
        ]
    },{
        title: 'footer',
        xtype: 'container',
        layout: 'fit',
        html: 'Some information in footer (copyrights, disclaimer link)'
    }
]
});

ただし、境界線レイアウトのアイテムは縮小され、そのブロックの1pxの境界線のみが表示されます。私にとって重要なのはscrollBarがあるので、ビューポート全体に境界線レイアウトを使用することはできません。その問題を解決するのを手伝ってください

4

1 に答える 1

6

パネルの高さは境界線のレイアウトで設定する必要があります。

{
    layout: 'border',
    height: 100,
    items: [
        {
        collapsible: true,
        width: 240,
        title: 'Aside Column',
        region: 'west',
        layout: 'fit',
        html: 'Aside widgets (news, balance, budget, goals) would be here.'},
    {
        title: 'Main Block',
        border: false,
        region: 'center',
        layout: 'fit',
        html: 'Main block were tabPanel would be nested in.'}
    ]
}

これを見てください：http：//jsfiddle.net/3CabN/4/

于 2012-12-08T14:25:46.307 に答える