ExtJS 6 - 可滚动的 GridPanels

debugcn 发表于 Dev

加西亚菲格雷斯

我正在研究 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'
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

});

我究竟做错了什么？非常感谢您提前。

埃文·特林博利

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

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();
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。