vbox 中缺少 extjs 滚动条

Question

我在水平盒子里面的垂直盒子里面有网格。面板 'Packages' 可使用鼠标滚轮滚动，但缺少滚动条。面板 'Configuration' 显示滚动条，我不知道这两个面板有什么区别。

这是我的 extjs 4.2 代码：

Ext.application({
name: 'Fiddle',
launch: function () {
    Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        defaults: {
            frame: true,
            autoScroll: true
        },
        items: [{
            xtype: 'panel',
            width: 350,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            resizable: true,
            resizeHandles: 'e',
            items: [{
                title: 'Configurations',
                height: 290,
                xtype: 'grid',
                store: new Ext.data.Store({
                    model: 'Ext.data.Record',
                    fields: [{
                        name: 'product',
                        type: 'string'
                    }],
                    data: (function () {
                        var res = []
                        for (var i = 0; i < 100; i++) {
                            res.push({
                                product: 'Product ' + i
                            });
                        }
                        return res;
                    })()
                }),
                columns: [{
                    text: 'Product',
                    dataIndex: 'product',
                    width: 120
                }]
            }, {
                xtype: 'splitter'
            }, {
                title: 'Builds',
                xtype: 'grid',
                flex: 1,
                viewConfig: {
                    enableTextSelection: true
                },
                columns: [{
                    text: 'Number',
                    dataIndex: 'number',
                    width: 120
                }]
            }]
        }, {
            xtype: 'panel',
            width: '100%',
            layout: {
                type: 'vbox'
            },
            items: [{
                title: 'Packages',
                width: '100%',
                xtype: 'grid',
                flex: 2,
                store: new Ext.data.Store({
                    model: 'Ext.data.Record',
                    fields: [{
                        name: 'name',
                        type: 'string'
                    }],
                    data: (function () {
                        var res = []
                        for (var i = 0; i < 100; i++) {
                            res.push({
                                name: 'Package ' + i
                            });
                        }
                        return res;
                    })()
                }),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name',
                    width: 380
                }]
            }, {
                xtype: 'splitter'
            }, {
                title: 'Changes',
                width: '100%',
                xtype: 'grid',
                flex: 1,
                columns: [{
                    text: 'Author',
                    dataIndex: 'author',
                    width: 159
                }]
            }]
        }]
    });
}
});

Answer 1

对于第二个 hbox 子面板，将 width: '100%', 替换为 flex: 1,。滚动条在那里，它只是在可见区域之外。此外，如果在父面板的 vbox 布局配置中指定 align: 'stretch'，则可以省略 "Changes" 和 "Packages" 网格的 width: '100%',，这意味着子项目将被拉伸水平填充父容器的宽度。

https://fiddle.sencha.com/#view/editor&fiddle/1nht

vbox 中缺少 extjs 滚动条

extjs scrollbar missing inside vbox

javascript

extjs

extjs4.2