Question

在ViewPort中Panel的简单示例中，面板不会包含文本溢出的滚动条，因为面板的autoScroll默认值为false。

以下是一个工作示例：http://jsfiddle.net/rqZ4y/（感谢CD ..）

这是一个稍微复杂一点的示例，其中包含一个GridPanel（autoScroll默认为true，所以不需要明确设置！）

Ext.application({
    launch: function () {
        Ext.create("Ext.Viewport", {
//            layout: "fit",
            items: [
                {
                    html: "Hello!"
                },
                {
                    xtype: "grid",
                    title: 'Simpsons Contacts',
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columns: [
                        { text: 'Name', dataIndex: 'name' },
                        { text: 'Email', dataIndex: 'email', flex: 1 },
                        { text: 'Phone', dataIndex: 'phone' }
                    ]
                }
            ]
        });
    }
});

工作示例： http://jsfiddle.net/gXsPk/

在这种情况下，网格没有滚动条。

我已禁用layout: "fit"以便同时显示两个面板。如果我指定layout: "fit"那么会导致“你好！”面板占用所有可用空间，网格根本不可见。

如果我删除“你好！”面板，并重新引入layout: "fit"选项，然后我得到一个带滚动条的网格！

工作示例： http://jsfiddle.net/VBAyS/

我在这里做错了什么？！

我正在使用Ext JS 4.1.1a

Answer 1

autoScroll的默认值为false。

将autoScroll: true设置为在组件布局元素上使用overflow:'auto'，并在必要时自动显示滚动条。

工作示例：http://jsfiddle.net/rqZ4y/

修改

使用vbox布局可以解决您的问题。

我将布局更改为：

layout: { type: 'vbox', align: 'stretch' }

接下来，我已将flex: 1添加到网格中。

工作示例：http://jsfiddle.net/gXsPk/1/

Ext JS：为什么ViewPort中的GridPanel没有滚动条？

1 个答案: