collapsed panel does not create a scroll when opened extjs

2
votes

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

enter image description here

enter image description here

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
1
javascripthtmlextjsextjs3
post the config for your grid – JamesHalsall
Jaitsu I have added the grid configuration... – AMember
try adding autoScroll: true to your grid panel config – JamesHalsall
hi, have tried it already, did not work. see the work around I have made below. – AMember

1 Answers

2
votes

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.