Extjs滚动条不出现答案

【问题标题】：Extjs scrollbar doesn't appearExtjs滚动条不出现
【发布时间】：2015-03-03 13:05:22
【问题描述】：

我有一个类似这个话题的问题：Extjs how to make the scrollbar appear?，但是太多的事情让我感到困惑。

只要表单比包含容器宽，我就需要显示滚动条。为什么 autoScroll: true 不起作用？

我将结合这个问题给出三个不同的例子。最需要的- 第一个前任。 1.https://fiddle.sencha.com/#fiddle/j2c

var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'anchor',

items: [{
    itemId: "TPMethodContentProvider",
    xtype: "form",
    autoScroll: true,
    layout: 'anchor',
    anchor: "100%",

    items: [{
        xtype: "container",
        padding: 5,
        layout: 'anchor',
        anchor: "100%",
        autoScroll: true,
        items: [{
                margin: 5,
                padding: 5,
                width: 850,
                xtype: "container",
                autoScroll: true,
                anchor: "100%",
                layout: 'column',

                items: [{
                    columnWidth: 0.7,
                    items: [{
                        itemId: "S1",
                        margin: 5,
                        xtype: 'textfield',
                        anchor: "95%",
                        fieldLabel: "type:",
                        labelWidth: 140,
                        tabIndex: 0,
                        value: "bd",

                    }],
                    layout: "anchor"
                }, {
                    columnWidth: 0.3,
                    items: [{
                        itemId: "S2",
                        margin: 5,
                        xtype: 'textfield',
                        anchor: "95%",
                        fieldLabel: "num:",
                        labelWidth: 140,
                    }],
                    layout: "anchor"
                }, ] //panel items
        }] // some container items
    }] // form items
}] }); win.show();

没有滚动条。

..fiddle.sencha.com/#fiddle/j2f

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Form Panel',
    bodyPadding: '5 5 0',
    width: 600,   
    items: [{
        xtype: 'container',
        padding: '5',
        layout: 'anchor',

fieldDefaults: {
    labelAlign: 'top',
    msgTarget: 'side'
},
defaults: {
    border: false,
    xtype: 'panel',
    layout: 'anchor'
},

layout: 'hbox',
items: [{
    items: [{
        xtype:'textfield',
        fieldLabel: 'First Name',
        anchor: '-5',
        name: 'first',                
    }]
}, {
    items: [{
        xtype:'textfield',
        fieldLabel: 'Last Name',
        anchor: '100%',
        name: 'last'
    }]
}], 
}], 
}); //Ext.create('Ext.container.Viewport', {});

它有效，直到最后一行注释 Ext.create('Ext.container.Viewport', {}); 如果我删除项目 Viewport 中的代码，则会观察到相同的行为。

..fiddle.sencha.com/#fiddle/j2g..

Ext.create('Ext.container.Viewport', {
padding: '5',

items: [{
id: 'mainPanelContainer',
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
//width: 600,

items: [{ //outer container
    autoScroll: true,
    xtype: 'container',
    padding: '5',
    layout: 'anchor',
    width: 600,

    items: [{

        xtype: 'container',
        padding: '5',
        layout: 'column',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'text1',
            name: 'Name1',
            columnWidth: .3
        }, {
            xtype: 'textfield',
            fieldLabel: 'text2',
            name: 'Name2',
            columnWidth: .7
        }], //container items
    }], //outer container items
}, ] //form items
}, ]});

滚动一直有效，直到在那个地方设置了宽度：600，但在注释的地方不起作用。

抱歉，2、3 ex 中的外部代码。一些不方便的 sn-ps 代码。

【问题讨论】：

标签： extjs

【解决方案1】：

你不应该使用'anchor'布局以防滚动使用。

正如您在fiddle 中看到的，我使用了'fit' 布局。如果您使用 ExtJS5，我不建议您使用 'autoScroll' 配置（已弃用），请改用 'scrollable'。 (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-scrollable)

var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'fit',

items: [{
    itemId: "TPMethodContentProvider",
    xtype: "form",
    layout: 'fit',
    width: 600,
    items: [{
                margin: 10,
                padding: 5,
                xtype: "container",
                scrollable: 'horizontal',
                layout: 'hbox',

                items: [{
                    itemId: "S1",
                    margin: 5,
                    xtype: 'textfield',
                    fieldLabel: "type:",
                    scrollable: 'horizontal',
                    labelWidth: 140,
                    tabIndex: 0,
                    value: "bd",
                }, {
                    itemId: "S2",
                    margin: 5,
                    xtype: 'textfield',
                    scrollable: 'horizontal',
                    fieldLabel: "num:",
                    labelWidth: 140,
            }] //panel items
        }] // form items
    }] //win items
});

win.show();

【讨论】：

#2 (fiddle.sencha.com/#fiddle/j3f) 和 #3 (fiddle.sencha.com/#fiddle/j3g) 中的相同内容
谢谢，但是如果我需要锚布局怎么办？为什么滚动在 ex2 中使用锚点起作用？
其实锚布局也可以。在第一个练习中，由于列布局，它不起作用，将其替换为 hbox 它将起作用
但我需要列布局

【解决方案2】：

我将布局更改为自动，这对我有用。现在可以添加/删除面板，滚动条会自动显示/隐藏。

    var workActivityPanel = new Ext.Panel({
        region: 'center',
        autoScroll: true,
        layout: {
            type: 'auto',
            align: 'stretch'
        }
    });

【讨论】：