6

フォームがコンテナーを含むよりも広くなるとすぐに、スクロールバーを表示する必要があります。プロパティ autoScroll: true をコンテナーに設定しましたが、機能しません。とにかく必要な結果を得る方法はありますか?

これが実際の例です

http://jsfiddle.net/mQC3B/2/

コード

Ext.create('Ext.container.Viewport', {

    layout: {
        header: false,
        type: 'border',
        padding: 0
    },
    items: [{
            region: 'north',
            padding: '0 150 0 150',
            height: 36,
            html: 'header'
        }, {
            id:'mainPanelContainer',
            autoScroll: true,
            padding: '0 150 0 150',
            region: 'center',
            items:[
                {
                    xtype:'form',
                    items:[{
                        xtype: 'container',
                        flex: 1,
                        layout: 'anchor',
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            anchor: '95%',
                            xtype: 'htmleditor',
                            fieldLabel: 'Popis',
                            name: 'Description',
                            height: 240,
                            width: 450
                        }]
                    }, {
                        xtype: 'container',
                        flex: 1,
                        layout: 'anchor',
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }, {
                            xtype: 'container',
                            margin: '0 0 8 0',
                            layout: 'hbox',
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: 'Name',
                                name: 'Name'
                            }, {
                                xtype: 'textfield',
                                fieldLabel: 'Name',
                                name: 'Name'
                            }]
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            name: 'Name'
                        }]
                    }]
                }
            ]
        }, {
            region: 'south',
            height: 25,
            padding: '0 150 0 150',
            html: 'Copyright © 2013'
        }]
});

編集

layout: 'fit' を mainPanelContainer に追加すると、スクロールバーが表示されますが、フォームの非表示の右側にスクロールすることはできません。

http://jsfiddle.net/mQC3B/3/

4

4 に答える 4

7

編集のフィドルで、次を変更します。

padding: '0 150 0 150',

中央の領域で次のことを行います。

margin: '0 150 0 150',

信じられないかもしれませんが、extjs レイアウトは padding プロパティをうまく処理できません。私は自分のレイアウトでこれに遭遇しました。あなたの例では、マージンはあなたが望むものを達成するために機能します。同じ結果を達成する別の方法は、ボーダー レイアウトを使用して別のレベルを深くネストし、パディングの動作を模倣するために空のスペースで東と西の領域を追加することです。

于 2013-08-16T13:32:47.330 に答える
2

基本的に、次のような autoScroll プロパティを追加するだけです。

autoScroll: true
于 2014-10-09T14:16:06.183 に答える
2

autoScroll: trueがそれを行う方法ですが、それが機能するにはすべてのレイアウトを正しくする必要があります。layout: 'fit'あなたのmainPanelContainerおよび/または あなたの を着てみてくださいform

于 2013-08-14T13:04:32.500 に答える