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可折叠面板在展开时不呈现工具栏?的主要内容,如果未能解决你的问题,请参考以下文章