Question

我遇到了类似这个主题的问题：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中的外码。一些不方便的代码片段。

Answer 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();

Answer 2

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

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

Extjs滚动条不会出现

2 个答案: