PDA

View Full Version : TabPanel Content is displaying in the wrong area



jbarbeau
Aug 06, 2014, 12:14 AM
The north panel is getting the content of the tab. The tab is created in javascript - this worked fine in ext 1.x - but I am upgrading and now the content is not rendering to the right place. I checked that the widget it was rendering to is correct but it still throws the panel outside of the tab on the upper part of the screen.

Also I noticed that it is not putting creating the content with an <iframe> element, even though this is specified in the addTab javascript.

We did move the Master pages from a border with column and row layouts to just a border layout. I have attached a screen shot - you will see the opened tab with the fields at the top of the screen instead of in the content of the tab.

Thanks,

geoffrey.mcgill
Aug 06, 2014, 12:34 AM
Do you have a <Center> region defined in the Viewport/BorderLayout?

jbarbeau
Aug 06, 2014, 5:09 PM
<ext:Panel ID="MainPanel" runat="server" Region="Center" Layout="FitLayout" Unstyled="true"
Collapsed="false" Border="true" Collapsible="false">
<Items>
<ext:Panel runat="server" ID="ContentPanel" Unstyled="true" Layout="BorderLayout">
<Items>
<ext:Panel ID="BreadcrumsPanel" runat="server" Region="North" Height="25" Title="&nbsp;"
Html="" Unstyled="true" Cls="cms-breadcrums cms-postcontent" Hidden="true" >
<Content>
</Content>
</ext:Panel>
<ext:Panel runat="server" Unstyled="true" Region="Center">
<Items>
<ext:Toolbar runat="server">
<Items>
<ext:Label runat="server" ID="SHLabel" Cls="make-bolder" />
<ext:ToolbarFill>
</ext:ToolbarFill>
<cms:CMSButton ID="ReloadButton" runat="server" Text="" IconCls="icon-page-reload">
</cms:CMSButton>
<ext:ToolbarSpacer Width="10px">
</ext:ToolbarSpacer>
<cms:CMSButton ID="AcceptButton" runat="server" Text="Accept">
</cms:CMSButton>
<ext:ToolbarSpacer Width="10px">
</ext:ToolbarSpacer>
<cms:CMSButton ID="CancelButton" runat="server" Text="Cancel">
</cms:CMSButton>
<ext:ToolbarSpacer Width="10px">
</ext:ToolbarSpacer>
<cms:CMSButton ID="CloseButton" runat="server" IconCls="icon-page-close">
<Listeners>
<Click Handler="closeThis();" />
</Listeners>
</cms:CMSButton>
</Items>
</ext:Toolbar>
<ext:Panel runat="server" Unstyled="true">
<Content>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>

This is the Page.Master and the content should display in "MainContent". So yes it has a Center element.

This is from the Site.Master:

<ext:Panel runat="server" Region="Center" Unstyled="true" Layout="BorderLayout" Collapsed="false"
Collapsible="false" MinWidth="965">
<Items>
<ext:Panel runat="server" Region="West" Split="true" MaxWidth="350" MinWidth="210"
ID="MenuPanel" Collapsible="true" Collapsed="false" Title="WELCOME" CtCls="vmenu-panel" Cls="center-header"
AutoScroll="true">
<Items>
<ext:Panel runat="server" ID="BlankMenuPanel" Unstyled="true">
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="Center" Unstyled="true" Layout="FitLayout" ID="SiteMainPanel" >
<Items>
<ext:Panel runat="server" ID="HomePanel">
<Content>
<div style="text-align:center; vertical-align:middle;">
<img src="/resources/images/CourtWatermarkFade.png" style="vertical-align:middle;width:100%;"/>
</div>
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>

This is from the addTab javascript:

addTab: function (config, closeFunc, activateFunc, focusFunc) {
if (Ext.isEmpty(config.url, false)) {
return;
}

var tp = Ext.getCmp('MainTabs');
tab = tp.add(new Ext.Panel({
//id: id,
title: config.title,
/*html: '<div style="width: 100%;height:100%"><iframe width ="100%" height="100%" src="' + config.url + '"></iframe></div>',*/
hideMode: 'display',
autoLoad: {
showMask: true,
scripts: true,
manuallyTriggered: true,
reloadOnEvent: false,
mode: "iframe",
url: config.url
},
listeners: {
/*activate: {
fn: activateFunc
},*/

beforeclose: closeFunc
},
closable: true
}));
tp.setActiveTab(tab);
if (tab) {
tab.addListener('activate', activateFunc);
tab.reload();
}
return tab;
}
};



Thanks for looking at this I cannot figure out what is going on.

jbarbeau
Aug 06, 2014, 11:02 PM
I think I am getting closer - I changed the "autoLoad" in addTab to Loader:


loader: {
url: config.url,
autoLoad: true,
loadMask: true,
contentType: 'html',
mode: 'iframe'
},


However - it is not creating the frame and displaying the panel with the data. I know it's got the data from the controller because it's in the Ext.onReady function when I look at the page elements - so the loader worked. But can't figure out why it is not rendering correctly.

I have attached what the elements look like for the panel.

Daniil
Aug 08, 2014, 10:08 AM
Hi @jbarbeau,

Please replace

mode: 'iframe'
with

renderer: "frame"

jbarbeau
Aug 14, 2014, 6:39 PM
Thank You!