Question

我有ExtJs大小和滚动的问题。这是一个简单的例子：https://fiddle.sencha.com/#fiddle/ucd

＆＃13;

Ext.onReady(function() {
    var win = new Ext.Window({
        id: 'win',
        layout: 'fit',
        closable: true,
        bodyPadding: 5,
        renderTo: Ext.getBody(),
        items: {
            xtype: "form",
            defaultAnchor: "100%",
            items: [{
                xtype: "panel",
                layout: "fit",
                overflowY: "scroll",
                //overflowY: "auto",	
                layout: 'hbox',
                items: [{
                    xtype: "fieldset",
                    margin: 5,
                    padding: 5,
                    labelWidth: 140,
                    defaultAnchor: "100%",
                    collapsible: true,
                    title: "groupbox",
                    items: [{
                        itemId: "SNAME",
                        xtype: "textfield",
                        margin: 5,
                        fieldLabel: "Name:",
                    }],
                }],
            }]
        }
    });
    
    win.show();
});

＆＃13;

问题：

这是一个副作用。我不明白为什么overflowY: 'auto'不会工作。它适用于我的本地项目，在这个Fiddle滚动表现为隐藏。我可能需要在resize事件上调用doLayout（）或其他东西。所以我做了overflow: "scroll"。
您可以看到ExtJs没有为滚动条留下位置，它覆盖了字段集。为什么？如何解决这个问题？
在我的本地项目中overflow: 'auto'有效。并且始终显示滚动条，因为内部面板div与body div面板具有相同的大小。因此滚动的行为与集合overflow: 'scroll'相同。并且通过滚动隐藏了fieldset右边框。

Answer 1

你的方式过于严厉。您将容器放在容器中的容器中，并且所有容器都有自己的布局计算。除了你的dom（渲染总是很昂贵）之外，ExtJs的布局管理器是忙碌的方式，我不知道出了什么问题，因为所有这些。

看看这段代码。它具有完全相同的结果，更清洁，你的dom更小。

Ext.onReady(function() {
    new Ext.form.Panel({
        id: 'form',
        closable: true,
        floating: true,
        bodyPadding: 10,
        width: 500,
        items: [{
            xtype: "fieldset",
            padding: 5,
            labelWidth: 140,
            layout: 'anchor',
            defaults: {
                xtype: "textfield",
                anchor: '100%',
                margin: 5
            },
            collapsible: true,
            title: "groupbox",
            items: [{
                name: "SNAME",
                fieldLabel: "Name:"
            }]
        }],
        renderTo: Ext.getBody()
    });
});

使用ExtJs滚动和调整大小

1 个答案: