What's New?

UpdatePanel and FitLayout

  1. #1
    Oct 06, 2008, 5:52 PM

    UpdatePanel and FitLayout

    Hello,

    What I'm trying to achieve is the following:

    Example.aspx:
    <%@ Page Language="C#" %>

<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" EnablePartialRendering="True" />
        <ext:ScriptManager runat="server" />
        <ext:ViewPort runat="server">
            <Content>
                <ext:BorderLayout runat="server">
                    <North>
                        <ext:Panel runat="server" Height="100">
                            <Content>
                                North
                            </Content>
                        </ext:Panel>
                    </North>
                    <Center>
                        <ext:Panel runat="server">
                            <Content>
                                <ext:FitLayout runat="server">
                                    <ext:TabPanel ID="TabPanel1" runat="server" AutoPostBack="True">
                                        <Tabs>
                                            <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
                                                <Content>
                                                    Tab 1
                                                </Content>
                                            </ext:Tab>
                                            <ext:Tab ID="Tab2" runat="server" AutoLoad="http://www.google.com" Title="Tab 2" />
                                        </Tabs>
                                    </ext:TabPanel>
                                </ext:FitLayout>
                            </Content>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Content>
        </ext:ViewPort>
    </form>
</body>
</html>
    However, when I introduce an UpdatePanel I get the following:

    Example.aspx:
    <%@ Page Language="C#" %>

<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" EnablePartialRendering="True" />
        <ext:ScriptManager runat="server" />
        <ext:ViewPort runat="server">
            <Content>
                <ext:BorderLayout runat="server">
                    <North>
                        <ext:Panel runat="server" Height="100">
                            <Content>
                                North
                            </Content>
                        </ext:Panel>
                    </North>
                    <Center>
                        <ext:Panel runat="server">
                            <Content>
                                <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                                    <ContentTemplate>
                                        <ext:Panel runat="server">
                                            <Content>
                                                <ext:FitLayout runat="server">
                                                    <ext:TabPanel ID="TabPanel1" runat="server" AutoPostBack="True">
                                                        <Tabs>
                                                            <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
                                                                <Content>
                                                                    Tab 1
                                                                </Content>
                                                            </ext:Tab>
                                                            <ext:Tab ID="Tab2" runat="server" AutoLoad="http://www.google.com" Title="Tab 2" />
                                                        </Tabs>
                                                    </ext:TabPanel>
                                                </ext:FitLayout>
                                            </Content>
                                        </ext:Panel>
                                    </ContentTemplate>
                                </asp:UpdatePanel>
                            </Content>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Content>
        </ext:ViewPort>
    </form>
</body>
</html>
    Can you guys give me a suggestion on how to achieve this without dropping the UpdatePanel?

    Cheers,
    Timothy
  2. #2
    Oct 06, 2008, 6:51 PM

    RE: UpdatePanel and FitLayout

    The tags as you have them nested in your second code sample will render just fine. Although once you introduce the <asp:UpdatePanel> it acts a clean separator disconnecting any of the Container+Layout logic above the UpdatePanel with whatever is nested inside the UpdatePanel.

    The UpdatePanel creates an updatable region and having any of the controls within the UpdatePanel participate in a Parent Layout outside of the UpdatePanel is not currently supported.


    For us to get the scenario you mocked-up to work is possible and is something we want to support, although currently is a very tricky problem and relies on functionality that we have theorized about, but has not been built.


    That said, it should be possible to resize the <ext:Panel> just inside the UpdatePanel to "fill" the <ext:Panel> just outisde of the UpdatePanel by setting the dimesions of the Panel dynamically or passing a height to .setHeight().


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Oct 06, 2008, 7:42 PM

    RE: UpdatePanel and FitLayout

    Thanks Geoffrey, I know the UpdatePanel puts a break between the control hierarchy but figured I would ask anyways!

    And great tip, I might find that useful! Would you be able to provide a short sample of that?

    Cheers,
    Timothy

Similar Threads

  1. UpdatePanel
    By Timothy in forum Open Discussions
    Replies: 20
    Last Post: Feb 11, 2010, 10:23 AM
  2. UpdatePanel bug
    By SouthDeveloper in forum 1.x Help
    Replies: 1
    Last Post: Oct 23, 2009, 4:18 PM
  3. UpdatePanel
    By Timothy in forum Bugs
    Replies: 2
    Last Post: Mar 03, 2009, 8:48 AM
  4. FitLayout Issue
    By jskibo in forum 1.x Help
    Replies: 5
    Last Post: Jan 23, 2009, 12:26 AM
  5. Fitlayout & FieldSet
    By Kalitte in forum 1.x Help
    Replies: 2
    Last Post: Dec 30, 2008, 5:17 PM

Posting Permissions