Extjs如何使滚动条出现？ [英] Extjs how to make the scrollbar appear?

问题描述

只要窗体宽于包含容器，我需要显示一个滚动条。我在容器上设置属性autoScroll：true，但它不起作用。有没有得到我需要的结果？

I need to show a scrollbar as soon as the form is wider then containing container. I set the property autoScroll: true on the container, but it's not working. Is there anyway to get the result I need ?

这是工作示例

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

编辑

添加布局后：fit到mainPanelContainer，滚动条出现，但不可能滚动到窗体的隐藏右侧。

After adding layout: 'fit' to mainPanelContainer the scrollbar appears, but it's not possible to scroll to the hidden right side of the form.

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

推荐答案

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

In your fiddle for your edit, change:

padding: '0 150 0 150',

在中心区域：

margin: '0 150 0 150',

相信它是否与extjs布局不能很好地处理填充属性。我之前已经遇到过我的布局。看起来像在你的例子中，保证金将用于实现你想要的。实现相同结果的另一种方法是将另一个级别深入到边框布局中，并添加具有空白空间的东西部区域以模拟填充的行为。

Believe it or not, extjs layouts do not handle the padding property very well. I have run into this before with my layouts. It looks like in your example, margin will work to achieve what you want. Another way to achieve the same result is to nest another level deep with a border layout and add east and west regions with the empty space to mimic the behavior of the padding.

这篇关于Extjs如何使滚动条出现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！