ExtJS 6 - 可滚动的GridPanel

Question

我正在研究Sencha ExtJS 6.5项目。我有两个网格面板，一个是彼此相邻的，我需要它们可以滚动，但无论我尝试什么，我似乎无法实现这一点。

我必须补充说，这两个网格面板位于另一个面板中，该面板也在ViewPort中。

这是我需要的图片：

这是我到目前为止编写的代码：

Ext.define('ScrollTest.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

    requires: [
        'ScrollTest.view.MyViewportViewModel',
        'Ext.toolbar.Toolbar',
        'Ext.button.Button',
        'Ext.grid.Panel',
        'Ext.grid.column.Column',
        'Ext.view.Table'
    ],

    viewModel: {
        type: 'myviewport'
    },
    layout: 'fit',

    items: [
        {
            xtype: 'panel',
            alignOnScroll: false,
            border: false,
            itemId: 'oMainPanel',
            title: 'Familias de Activos',
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    itemId: 'oGridToolbar',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Agregar Familia'
                        },
                        {
                            xtype: 'button',
                            text: 'Modificar Familia'
                        },
                        {
                            xtype: 'button',
                            text: 'Eliminar Familia'
                        },
                        {
                            xtype: 'button',
                            text: 'Detalle'
                        }
                    ]
                }
            ],
            items: [
                {
                    xtype: 'panel',
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'gridpanel',
                            flex: 1,
                            alignOnScroll: false,
                            scrollable: true,
                            title: 'Familias',
                            headerBorders: false,
                            bind: {
                                store: '{oStore}'
                            },
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'id',
                                    text: 'blah blah'
                                }
                            ],
                            viewConfig: {
                                scrollable: 'vertical'
                            }
                        },
                        {
                            xtype: 'gridpanel',
                            flex: 1,
                            alignOnScroll: false,
                            scrollable: 'vertical',
                            title: 'Articulos',
                            bind: {
                                store: '{oStore2}'
                            },
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'id',
                                    text: 'blop blop'
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

});

我做错了什么？非常感谢你提前。

Answer 1

你有一个不必要的嵌套层，有一个没有定义布局的面板。删除它：

Ext.define('ScrollTest.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

    layout: 'fit',

    items: [{
        xtype: 'panel',
        border: false,
        itemId: 'oMainPanel',
        title: 'Familias de Activos',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            itemId: 'oGridToolbar',
            items: [{
                xtype: 'button',
                text: 'Agregar Familia'
            }, {
                xtype: 'button',
                text: 'Modificar Familia'
            }, {
                xtype: 'button',
                text: 'Eliminar Familia'
            }, {
                xtype: 'button',
                text: 'Detalle'
            }]
        }],
        items: [{
            xtype: 'gridpanel',
            flex: 1,
            title: 'Familias',
            store: {
                data: (function() {
                    var data = [],
                        i;
                    for (i = 1; i <= 100; ++i) {
                        data.push({id: i});
                    }
                    return data;
                })()
            },
            columns: [{
                dataIndex: 'id',
                text: 'blah blah'
            }]
        }, {
            xtype: 'gridpanel',
            flex: 1,
            title: 'Articulos',
            store: {
                data: (function() {
                    var data = [],
                        i;
                    for (i = 1; i <= 100; ++i) {
                        data.push({id: i});
                    }
                    return data;
                })()
            },
            columns: [{
                dataIndex: 'id',
                text: 'blop blop'
            }]
        }]
    }]

});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        new ScrollTest.view.MyViewport();
    }
});