面板内的 extjs gridpanel 不自动滚动或调整大小

Question

我有一个标签面板。在选项卡中，我有一个面板，其中包括一个工具栏和 3 个项目:[字段集、网格面板和另一个字段集(或某些按钮)]。我无法让网格面板显示滚动条。它仅在我设置 gridpanel 的 maxheight/minheight 时才有效。
我还尝试将 gridpanel 包裹在容器内。没运气。
在示例中，我使用适合布局。我尝试了“ anchor ”布局，并将 anchor :'100％50％'分配给gridpanel，希望在我调整浏览器大小时它会调整大小。没运气。

或者，如果 gridpanel 是选项卡中的唯一项目，则自动滚动将起作用。所以当它在另一个面板内时出现，自动滚动/调整大小不起作用。

我在这里错过了什么吗？

Ext.application({
    name: 'MyApp',
    launch: function () {

        // create the data store
        var d = ['company', 100];
        var myData = [];
        for (var i = 0; i < 50; i++) {
            myData[i] = d;
        }
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [{
                name: 'company'
            }, {
                name: 'price',
                type: 'float'
            }],
            data: myData
        });

        Ext.create("Ext.container.Viewport", {
            layout: {
                type: 'border'
            },
            items: [{
                xtype: 'toolbar',
                id: 'headerbar',
                region: 'north',
                height: 30
            }, {
                xtype: 'toolbar',
                id: 'menubar',
                region: 'north',
                height: 30
            }, {
                xtype: 'tabpanel',
                itemId: 'maintabpanel',
                activeTab: 0,
                region: 'center',
                plain: true,
                margins: '5 5 5 5',
                layout: 'fit',
                items: [{
                    closable: false,
                    title: 'Tab',
                    margins: '0 0 0 0',
                    items: [{
                        xtype: 'panel',
                        title: 'Panel',
                        layout: 'fit',
                        tools: [{
                            type: 'help',
                            tooltip: 'Help'
                        }, {
                            type: 'close',
                            tooltip: 'Close'
                        }],
                        items: [{
                            xtype: 'fieldset',
                            title: 'Field Set',
                            layout: 'hbox',
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: 'Input'
                            }]
                        }, {
                            xtype: 'gridpanel',
                            autoScroll: true,
                            store: store,
                            columns: [{
                                text: 'Company',
                                flex: 1,
                                sortable: true,
                                dataIndex: 'company'
                            }, {
                                text: 'Price',
                                flex: 1,
                                sortable: true,
                                dataIndex: 'price'
                            }],
                            viewConfig: {
                                autoFit: true
                            }
                        }, {
                            xtype: 'fieldset',
                            title: 'Field Set 2',
                            layout: 'hbox',
                            items: [{
                                xtype: 'textfield',
                                fieldLabel: 'Output'
                            }]
                        }]

                    }]
                }]
            }, {
                xtype: 'box',
                id: 'footer',
                region: 'south',
                html: '<h1> Copyright 2012</h1>',
                height: 30
            }]
        });
    }
});

Answer 1

注意gridpanel的父面板有fit布局，但它有 1 个以上的项目(字段集、网格面板和另一个字段集)。一个 fit布局只能有 1 个 child 。

此外，该 fit 的父级面板(带有 closable : false - 选项卡的面板)没有布局定义。

这是一个 JsFiddle modified version of your code那个有效。