打开 extjs 时折叠的面板不会创建滚动

Question

EXT V. 3.01

我有一个带有边框布局的视口。

中心区域是一个标签面板。

tabpanel 活动选项卡在 vbox 布局中包含 2 个面板。

1) 搜索面板。

2) 一个网格结果面板。

搜索面板有 2 个文件集：

1) 基本搜索

2) 高级搜索

默认情况下，高级搜索文件集是折叠的。

问题是，当我展开高级搜索字段集时，它会将结果网格向下推，但没有打开滚动，因此网格被推到视野之外，没有任何方法可以丰富它。

我想在高级搜索文件集展开时添加一个滚动条。

下面是一些可能有帮助的代码：

Ext.extend(Ext.Viewport, {
     constructor: function (config) {
        config = Ext.apply({
        layout: 'border',
        items:[
            new Ext.TabPanel({
                activeTab: 0,
                region: 'center',
                items:[{
                        xtype:'panel',
                        title: this.localize.FillDetails,
                        layout: 'vbox',
                        items:[
                            this.searchPanels,
                            this.chooseInvoiceGrid
                        ]
                    }
                ]
            })
        ]
    },config);
     }
}

这是我的网格配置：

config = Ext.apply({
        store: this.storeProvider.getArChooseInvoiceStore(),
        stripeRows:true,
        loadMask: true,
        autoExpandMax: 2000,
        flex :1,
        tbar: this.searchBar,
        bbar: this.pagingBar,
        viewConfig: {
            deferEmptyText:false,
            emptyText: this.localize.NoInvoiceToDisplay
        },
        listeners: {
            // prevents default browser menu on client right click.
            render: function (grid) {
                grid.getEl().on('contextmenu', Ext.emptyFn, null, { preventDefault: true });
            },
            rowdblclick : this.onInvoiceClick 
        },
        columns: [
        {
            header: this.localize.OrderDivision,
            id: 'OrderingDepartment',
            dataIndex: 'OrderingDepartment',
            sortable:true,
            renderer: this.rendererFunction 
        }, {
            header: this.localize.RedRoute,
            dataIndex: 'RedRoute',
            sortable:true,
            width:50,
            renderer: this.rendererFunction
        }, {
            header: this.localize.DocumentType,
            dataIndex: 'DocumentType',
            sortable:true,
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                if(value){
                    metaData.attr = 'title="'+value.Name+'"';
                    return value.Name;
                }
                else{
                    return '';
                }
            }
        }, {
            header: this.localize.InvoiceNumber,
            dataIndex: 'InvoiceNumber',
            sortable:true,
            renderer: this.rendererFunction
        }, {
            header: this.localize.SupplierName,
            dataIndex: 'SupplierName',
            sortable:true,
            renderer: this.rendererFunction
        } , {
            header: this.localize.InvoiceDate,
            dataIndex: 'InvoiceDate',
            sortable:true,
            width:80,
            renderer: this.rendererDateFunction
        }, {
            header: this.localize.ReceptionDate,
            dataIndex: 'InvoiceReceivedDate',
            sortable:true,
            width:80,
            renderer: this.rendererDateFunction
        } , {
            header: this.localize.InvoiceType,
            dataIndex: 'InvoiceType',
            sortable:true,
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                if(value){
                    metaData.attr = 'title="'+value.Name+'"';
                    return value.Name;
                }
                else{
                    return '';
                }
            }
        }, {
            header: this.localize.AppliesInvoiceNum,
            dataIndex: 'ReferToInvoice',
            sortable:true,
            hidden:true,
            //width:150,
            renderer: this.rendererFunction
        }, {
            header: this.localize.SumWithVAT,
            dataIndex: 'SumIncludingVat',
            sortable:true,
            width:80,
            renderer: this.rendererFunction
        }, {
            header: this.localize.OrderCurrency,
            dataIndex: 'Currency',
            sortable:true,
            width:50,
            renderer: this.rendererFunction
        }, {
            header: this.localize.FinanceInvoiceType,
            dataIndex: 'AuthenticationDocumentType',
            sortable:true,
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                if(value){
                    metaData.attr = 'title="'+value.Name+'"';
                    return value.Name;
                }
                else{
                    return '';
                }
            }
        }, {
            header: this.localize.OrderNumber,
            dataIndex: 'PurchaseOrderNumber',
            sortable:true,
            renderer: this.rendererFunction
        }, {
            header: this.localize.DeliveryNoteNumber,
            dataIndex: 'DeliveryNoteNumber',
            sortable:true,
            hidden:true,
            renderer: this.rendererFunction
        }, {
            header: this.localize.InvoiceStatus,
            dataIndex: 'InvoiceStatus',
            sortable:true,
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                if(value){
                    metaData.attr = 'title="'+value.Name+'"';
                    return value.Name;
                }
                else{
                    return '';
                }
            }
        }, {
            header: this.localize.InvoiceCreatorName,
            dataIndex: 'SavedByUser',
            sortable:true,
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                if(value){
                    metaData.attr = 'title="'+value.Name+'"';
                    return value.Name;
                }
                else{
                    return '';
                }
            }
        }, {
            header: this.localize.InvoiceTypeLinkage,
            dataIndex: 'Hatzmada',
            sortable:true,
            width:50,
            hidden:true,
            renderer: this.rendererFunction
        }, {
            header: this.localize.Leasing,
            dataIndex: 'Leasing',
            sortable:true,
            hidden:true,
            width:50,
            renderer: this.rendererFunction
        }, {
            header: this.localize.ValidationNumber,
            dataIndex: 'AuthenticationNumber',
            hidden:true,
            sortable:true,
            renderer: this.rendererFunction
        }, {
            header: this.localize.ValidationDate,
            dataIndex: 'AuthenticationPaymentDate',
            sortable:true,
            hidden:true,
            width:80,
            renderer: this.rendererDateFunction
        }, {
            header: this.localize.Storno,
            dataIndex: 'Storno',
            sortable:true,
            hidden:true,
            renderer: this.rendererFunction
        }, {
            header: this.localize.BatchNumber,
            dataIndex: 'RunNumber',
            sortable:true,
            hidden:true,
            renderer: this.rendererFunction
        }, {
            header: this.localize.PaymentDate,
            dataIndex: 'ExpectedPaymentDate',
            sortable:true,
            width:80,
            renderer: this.rendererDateFunction
        }, {
            header: this.localize.DivisionResponsible,
            dataIndex: 'ProcurementOrganization',
            sortable:true,
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                if(value){
                    metaData.attr = 'title="'+value.DivisionSupervisorName+'"';
                    return value.DivisionSupervisorName;
                }
                else{
                    return '';
                }
            }
        }, {
            header: this.localize.InvoiceResponsible,
            dataIndex: 'InvoiceSupervisor',
            sortable:true,
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                if(value){
                    metaData.attr = 'title="'+value.Name+'"';
                    return value.Name;
                }
                else{
                    return '';
                }
            }
        }, {
            header: this.localize.AccountsDepartment,
            dataIndex: 'AccountingDepartment',
            sortable:true,
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                if(value){
                    metaData.attr = 'title="'+value.Name+'"';
                    return value.Name;
                }
                else{
                    return '';
                }
            }
        }, {
            header: this.localize.Archive,
            dataIndex: 'Archive',
            hidden:true,
            sortable:true,
            renderer: this.rendererFunction
        }, {
            header: this.localize.AddedDocument,
            dataIndex: 'HasAttachment',
            sortable:true,
            hidden:true,
            renderer: this.rendererFunction
        }
      ]
    }, config); //eo config apply

Answer 1

好的，我找到了符合我要求的解决方法：

这是我的解决方法：

                         listeners: {
                            afterlayout: function (panel, continerLayout) {
                                var innerBox = panel.getEl().child(".x-box-inner");
                                if(innerBox){
                                    if (!innerBox.hasClass('addScroll')) {
                                        innerBox.addClass("addScroll");
                                    }

                                    var width = (panel.getWidth() - 37) > 0 ?  panel.getWidth() - 37 : panel.getWidth();
                                    this.searchPanels.regularSearchFS.setWidth(width);
                                    this.searchPanels.advancedSearchFS.setWidth(width);
                                    this.chooseInvoiceGrid.setWidth(width + 9);
                                }

                            },
                            scope:this
                        }

我已将此侦听器添加到第一个选项卡，从现在开始，我将使用“addScroll”类手动管理滚动和内部面板宽度...

我知道这是一个丑陋的解决方案，但它是我能在时间限制内找到的最好的解决方案......我仍然很高兴听到更好的解决方案。