Extjs如何让滚动条出现？答案

【问题标题】：Extjs how to make the scrollbar appear?Extjs如何让滚动条出现？
【发布时间】：2013-08-14 13:00:28
【问题描述】：

只要表单比包含容器更宽，我就需要显示滚动条。我在容器上设置了属性 autoScroll: true ，但它不起作用。反正有没有得到我需要的结果？

这是工作示例

代码

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 &copy; 2013'
        }]
});

编辑

将 layout: 'fit' 添加到 mainPanelContainer 后，滚动条出现，但无法滚动到表单的隐藏右侧。

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

【问题讨论】：

标签： extjs

【解决方案1】：

在您的小提琴中进行编辑，更改：

padding: '0 150 0 150',

在中心区域到：

margin: '0 150 0 150',

信不信由你，extjs 布局不能很好地处理 padding 属性。我之前的布局也遇到过这个问题。在您的示例中，margin 可以实现您想要的效果。实现相同结果的另一种方法是使用边框布局嵌套另一个深层次，并使用空白空间添加东部和西部区域以模仿填充的行为。

【讨论】：

将填充更改为边距后，滚动条看起来不错。但我仍然无法在较小的屏幕上滚动到表单的右侧。
取出布局：“适合”并给表格一个宽度。
还要小心使用border: 0 - 这也会关闭滚动条。
ExtJS 被严重破坏的另一个很好的例子

【解决方案2】：

autoScroll: true 是这样做的方法，但您需要正确设置所有布局才能使其正常工作。尝试将layout: 'fit' 放在您的mainPanelContainer 和/或form 上。

【讨论】：

我将布局适合设置添加到 mainPanelContainer。滚动条被推动，但您不能将其滚动到表单的右端。 jsfiddle.net/mQC3B/3

【解决方案3】：

基本上你只需要像这样添加 autoScroll 属性：

autoScroll: true

【讨论】：

【解决方案4】：

如果您删除嵌套表单并仅将填充放在总体容器（本示例中的视口）上，它似乎可以让您从我的理解中得到您想要的。

http://jsfiddle.net/mQC3B/15/

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

    padding: '0 150 0 150',

    layout: {
        header: false,
        type: 'border'
    },
    items: [{
        region: 'north',
        height: 36,
        html: 'header'
    }, {
        id: 'mainPanelContainer',
        autoScroll: true,
        region: 'center',
        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: 'Names',
                    name: 'Name'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    name: 'Name'
                }]
            }, {
                xtype: 'textfield',
                fieldLabel: 'Name',
                name: 'Name'
            }]
        }]
    }, {
        region: 'south',
        height: 25,
        html: 'Copyright &copy; 2013'
    }]
});

【讨论】：