свернутая панель не создает прокрутки при открытии extjs

Question

EXT V. 3.01

У меня есть порт просмотра с макетом границы.

Центральная область является панелью табуляции.

активная вкладка панели вкладок содержит 2 панели в макете vbox.

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" ...

Это уродливое решение, которое я знаю, но это лучшее, что я смог найти за определенный срок ... Я все еще рад услышать лучшие решения.