0

在 ViewPort 中的面板的简单示例中，面板将没有用于文本溢出的滚动条，因为默认为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

4

1 回答 1

1

的默认autoScroll值为false。

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

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

编辑：

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

我将布局更改为：

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

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

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

于 2013-03-11T18:27:48.080 回答