Question

EXT V. 3.01

I have a view port with border layout.

The center region is a tabpanel.

the tabpanel active tab holds 2 panel in a vbox layout.

1) a search panel.

2) a grid resoult panel.

the search panel has 2 filed sets:

1) basic search

2) advanced search

the advance search filedset is collapsed by default.

the problem is when I expand the advance search fieldset it pushes the result grid down but no scroll is opend and so the grid is pushed out of view without any way to rich it.

I would like to add a scroll when the advance search filedset get expanded.

Here is some code that might help:

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

Here is my grid configuration:

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

ok I have found a work around that met my requierments:

here is my fix:

                         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
                        }

I have add this listeners to the first tab and from now on I am managing the scroll and the inner panels width manually with my “addScroll” class…

It is an ugly fix I know but it is the best I could find under the time limits… I am still happy to hear better solutions.