Question

我在hbox内部的vbox中有网格。小组＆＃39;包裹＆＃39;可以使用鼠标滚轮滚动但滚动条缺失。面板＆＃39;配置＆＃39;显示滚动条，我无法弄清楚这两个面板之间的区别。

这是我的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布局配置中指定width: '100%',，则可以省略align: 'stretch'“更改”和“包”网格，这意味着子项将水平拉伸以填充父容器的宽度。

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

在vbox中丢失extjs滚动条

1 个答案: