extjs panel内的组件显示与隐藏
我在一个panel里添加了2套formPanel与gridPanel,需要动态切换它们的显示。
代码如下:
newsFormPanel = createNewsFormPanel();
newsMatchGridPanel = new ForumNewsMatchGrid({
pageSize : 10,
param : {"newsQuery.keywordId" : taskId,'illFlag' : illFlag},
region : 'center',
initQuery : true,
storeUrl : '${ctx}/forum/forumKeyword!listNewsMatchCrod.action',
addOperate : true
});
newsMatchMainPanel = new Ext.Panel({
layout : 'border',
border : false,
region : 'center',
hideMode: 'visibility' ,
bodyBorder : false,
items : [newsFormPanel,newsMatchGridPanel]
});
searchForm = _createQueryPanel();
gridPanel = new ForumTopicGrid({
pageSize : 10,
param : {"forumTopicQuery.keywordId" : taskId,'illFlag' : illFlag},
region : 'center',
initQuery : true,
storeUrl : '${ctx}/forum/forumKeyword!listTopicCrod.action',
// viewUrl : '${ctx}/forum/forumPost.action?id=',
addOperate : true
});
mainPanel = new Ext.Panel({
layout : 'border',
border : false,
region : 'center',
hideMode: 'visibility' ,
bodyBorder : false,
items : [searchForm,gridPanel]
});
newsMatchMainPanel.hide();
main_box_panel= new Ext.Panel({
layout : 'fit',
border : false,
region : 'center',
bodyBorder : false,
items: [mainPanel,newsMatchMainPanel]
})
viewport = new Ext.Viewport({
layout : 'border',
border : false,
bodyStyle : 'background-color:white;',
items : [treePanel,
main_box_panel
]
});
function changeMainPanel(type){
if(type=='news'){
newsMatchMainPanel.show();
mainPanel.hide();
main_box_panel.doLayout();
}else{
mainPanel.show();
newsMatchMainPanel.hide();
main_box_panel.doLayout();
}
}
当main_box_panel使用fit布局时,newsMatchMainPanel.hide();显示mainPanel。当使用border布局时则只能把mainPanel.hide();隐藏,否则什么也不显示。也就是说fit只能显示第一个组件,border显示第二个组件。
而我动态的hide()与show()只能将需要隐藏的隐藏了,show()却无效。
请了解的朋友给解决一下。弄了很久了搞不清楚。谢过了