2

私はextjsが初めてです。extjsを使ってページを作りたいです。

__________________________
|hd______________________|
| | p1 <|p2 |
| | | | |--> ビューポートになります (ウィンドウのサイズ変更時に
| | | スクロール バー
| | |
| | |
| |
|____________|______________|

  • HD --> 幅 100 の見出し

  • p1 -​​-> 西側で折りたたまれ、分割 = true のパネル 1

  • p2 --> 残りの場所を占めるパネル 2

構造を構築しましたが、ウィンドウのサイズを変更しても 100% 維持できませんでした

コードスニペット

EditorUi = Ext.extend(Ext.Viewport, {
    layout: 'fit',
    initComponent: function() {
        this.items = [{
            xtype: 'panel',
            title: 'Heading',
            autoHeight: true,
            autoWidth: true,
            layout: 'hbox',
            items: [{
                xtype: 'panel',
                title: 'Navigation',
                collapsible: true,
                region: 'west',
                width: 200,
                split: 'true',
                margins: '3 0 3 3',
                cmargins: '3 3 3 3'
            }, {
                xtype: 'panel',
                title: 'container',
                region: 'center',
                autoHeight: true,
                autoWidth: true,
                split: 'true',
                margins: '3 0 3 3',
                cmargins: '3 3 3 3'
            }]
        }];
        EditorUi.superclass.initComponent.call(this);
    }
});


Ext.onReady(function() {
    new EditorUi();
})

どうすればこれを実装できますか?

私を助けてください。

4

1 に答える 1

5

あなたが本当に欲しいのはBorderLayoutのようですか？また、Ext レイアウトを使用している場合は、autoHeight を使用しないでください。これは、「コンテンツに基づいてブラウザーに高さを決定させる」ことを意味し、必要なものではありません。また、デフォルトの構成を提供するためだけに initComponent をオーバーライドする必要はありません。代わりにこれを試してください（テストされていません）：

EditorUi = Ext.extend(Ext.Viewport, {
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        height: 100,                
        title: 'Heading',
    },{
        xtype: 'panel',
        title: 'Navigation',
        collapsible: true,
        region:'west',
        width:200,
        split:'true',
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    },{
        xtype: 'panel',
        title: 'container',
        region:'center',
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    }];
});

Ext.onReady(function(){
    new EditorUi();
});
于 2010-04-02T12:31:03.713 に答える