TabPanel Content is displaying in the wrong area

[jbarbeau]

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]

Do you have a <Center> region defined in the Viewport/BorderLayout?

[jbarbeau]

<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]

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]

Hi @jbarbeau,

Please replace

mode: 'iframe'

with

renderer: "frame"

[jbarbeau]

Thank You!