ExtJS可折叠面板在展开时不呈现工具栏?

Posted

技术标签:

【中文标题】ExtJS可折叠面板在展开时不呈现工具栏?【英文标题】:ExtJS collapsible panel not render toolbar on expand? 【发布时间】:2012-05-17 15:09:14 【问题描述】:

在可折叠面板中渲染带有工具栏的网格时遇到了麻烦。正如您在底部的代码中看到的那样,我有阅读器、存储、带有 bbar 和面板的网格。当我将面板的可折叠属性设置为 false 时,网格的工具栏呈现完美。但是,当我将面板可折叠属性设置为 true 然后展开面板时,我看不到工具栏。我想在面板上显示带有工具栏的网格和数据展开没有任何麻烦。如何修复此代码?

谢谢。

var reader_DailyActivity = new Ext.data.JsonReader(
    totalProperty       : 'total',
    successProperty : 'success',
    root            : 'data',
    fields          : [
                        name: 'date',
                        name: 'time',
                name: 'description',
                name: 'speed',
                name: 'distance',
                name: 'type',
                name: 'source'
            ]
);

var store_DailyActivity = new Ext.data.Store(
    id      : 'dailyActivityStoreID',
    reader      : reader_DailyActivity
);

var pagingToolbar = new Ext.PagingToolbar(
    pageSize    : 20,
    buttonAlign     : 'center',
    store       : store_DailyActivity
);

var DailyActivityGrid = new Ext.grid.GridPanel(
    id          : 'dailyActivityGrid',
    store           : store_DailyActivity,
    loadMask        : true,
    height          : 300,
    autoScroll      : true,
    viewConfig      :  
        emptyText       : 'No Record Found',
        deferEmptyText  : false,
        forceFit        : true
    ,
    columns         :[
                    header: 'Date', dataIndex: 'date',
                    header: 'Time', dataIndex: 'time',
                    header: 'Description', dataIndex: 'description',
                    header: 'Speed', dataIndex: 'speed',
                    header: 'Distance', dataIndex: 'distance',
                    header: 'Type', dataIndex: 'type',
                    header: 'Source', dataIndex: 'source'
                ],
    bbar        : pagingToolbar
);

var VehicleDetail = new Ext.Panel(
    title       : 'Activity Details',
    id      : 'panel_DetailID',
    collapsible : true,
    collapsed   : true,
renderTo    : 'renderedDivID',
    items       : DailyActivityGrid,
    listeners   : 
        'expand' : function(hede)
        
            var panelMask = Ext.getCmp('panel_DetailID');
            // mask grid panel
            panelMask.getEl().mask('Please Wait');

        Ext.Ajax.request(                 
                url: 'url comes here',
                params: 
                
                    param1  : reqParam1,
            start   : 0,
            limit   : 20
                ,
                success: function (result, request) 
                                   
                    var resData = Ext.util.JSON.decode(result.responseText);
                    store_DailyActivity.loadData(resData);
                    // unmask grid panel
                    panelMask.getEl().unmask();
                ,
                failure: function ()
                
                    console.log('error');
                
        );
        
    
);

【问题讨论】:

【参考方案1】:

请尝试移除 GridPanel 的高度。我在 RowExpander 中遇到了同样的问题,我试图在扩展器上加载网格。就我而言,Grid 显示正常,但由于高度限制,tbar 和 bbar 没有显示。因此,我尝试移除网格的高度,它为我带来了成功。您的问题与我的类似,因此请尝试此建议。希望它有效!

【讨论】:

【参考方案2】:

你可以尝试几件事:

    给包含面板一个布局配置layout: 'fit'。 使用显式停靠项,即删除 bbar: pagingToolbar 并放入:
dockedItems: [
    xtype: 'pagingtoolbar',
    dock: 'bottom',
    pageSize: 20,
    buttonAlign: 'center',
    store: store_DailyActivity
],

【讨论】:

非常感谢 Geronimo,我尝试了您的答案,但无法正常工作。我把 dockedItems 放到我的网格中,然后我展开折叠的面板,它没有放栏。

以上是关于ExtJS可折叠面板在展开时不呈现工具栏?的主要内容,如果未能解决你的问题,请参考以下文章

折叠 div 内的引导工具提示位置

在标签面板中添加按钮 [extjs 3.2]

面板折叠 ExtJS 上的 HTMLEditor 文本区域丢失数据

可折叠工具栏 - 使片段页脚在 Android 中始终可见

EXTjs 面板折叠和展开方法

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