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

Posted 2023-02-26

【中文标题】打开 extjs 时折叠的面板不会创建滚动

【英文标题】：collapsed panel does not create a scroll when opened extjs

【发布时间】：2011-12-13 13:01:05

【问题描述】：

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

【问题讨论】：

发布网格配置

Jaitsu 我已经添加了网格配置...

尝试将autoScroll: true 添加到您的网格面板配置中

你好，已经试过了，还是不行。看看我在下面所做的工作。

【参考方案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”类手动管理滚动和内部面板宽度...

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