[CLOSED] UserControl with top level layout throws in direct event

  1. #1

    [CLOSED] UserControl with top level layout throws in direct event

    Hi, while experimenting with dynamically loaded user controls I came across forum posts which place a fit-layout at the top level of a user control to achieve dynamic resizing. Indeed it seems Ext.Net provides special support if the top level element in a user control is a layout. While this works great for static controls as well as controls added during postback I can't seem to get it to work with a Direct Event + UpdateContent call. For this case Ext.Net seems to generate invalid javascript, as I get an exception of missing semicolons, and when peeking at the script it looks like some json was dumped into the script without a wrapping javascript call. Is this a bug or is this scenario not supported?

    PS: If you have advice or alternatives for dynamically generating Ext.Net panels/forms I wouldn't mind doing it differently. I know I could generate the Ext.Net controls in C# code and then call one of the XRender functions, but writing the whole control tree in C# is no fun, so I'm looking for alternatives. The UserControl approach with top level fit layout looked promising until I hit the DirectEvent problem.

    sandbox3.aspx
    <%@ Page language="C#" autoeventwireup="true" %>
    <!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 runat="server">
        <title>Test Page</title>
    </head>
    <body>
        <form runat="server" id="wForm">
        <asp:ScriptManager runat="server" id="wScriptManager" />
        <ext:ResourceManager runat="server" id="wResourceManager" ajaxviewstatemode="Enabled" />
        <div>
            <ext:Viewport runat="server" layout="Fit">
                <Items>
                    <ext:Panel runat="server" layout="Fit">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" text="Add Control through Direct Event" ondirectclick="Button_DirectClick" />
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Items>
                            <ext:TabPanel runat="server">
                                <Items>
                                    <ext:Panel runat="server" id="tab" title="Tab 1" />
                                </Items>
                            </ext:TabPanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    <script runat="server">
        protected void Button_DirectClick(object sender, DirectEventArgs e)
        {
            var control = LoadControl("~/sandbox3.ascx");
            control.ID = "myControl";
            tab.ContentControls.Add(control);
            tab.UpdateContent();
        }
    </script>
    sandbox3.ascx
    <%@ Control language="C#" %>
    <ext:FitLayout runat="server">
        <Items>
            <ext:Container runat="server" layout="Form">
                <Items>
                    <ext:TextField runat="server" fieldlabel="Field 1" text="some text" anchorhorizontal="96%" />
                    <ext:DateField runat="server" fieldlabel="Field 2" anchorhorizontal="96%" />
                    <ext:DropDownField runat="server" fieldlabel="Field 3" anchorhorizontal="96%" />
                </Items>
            </ext:Container>
        </Items>
    </ext:FitLayout>
    Last edited by Daniil; Aug 15, 2012 at 10:04 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Yes, the UpdateContent method can't work when there is a layout control at the top of a user control.

    In this case you should re-render the tab calling:
    tab.Render();
    instead of UpdateContent.
  3. #3
    Ah, didn't think of that, thanks.

    While this gets the user control loaded it deactivates the selected tab, and if I add more then one tab it messes up the tab order.

    Would it make sense to re-render the whole TabPanel instead of the tab page or should I try "fixing" the tab order + active index with some javascript?

    [edit] re-rendering works for the example I've given but I'm still getting an exception in my actual project. Something about dom being undefined in 'me.dom.style', during a setLeftTop method, from Ext.Element.addMethods. I'll try to reduce it into an example.

    [edit] Was my mistake. One of the places where I was loading a user control used a border layout instead of a tab panel, but of course border layout doesn't support re-rendering its panels. Wrapped that one inside a container and it works as well.
    Last edited by syncos; Aug 14, 2012 at 9:05 AM. Reason: Additional Info
  4. #4
    Quote Originally Posted by syncos View Post
    While this gets the user control loaded it deactivates the selected tab, and if I add more then one tab it messes up the tab order.
    Please use an additional Container placing it into the tabs and putting a user control into that Container, i.e. the same as you already did for BorderLayout.
  5. #5
    Quote Originally Posted by Daniil View Post
    Please use an additional Container placing it into the tabs and putting a user control into that Container, i.e. the same as you already did for BorderLayout.
    Works great now, thanks!

Similar Threads

  1. Replies: 4
    Last Post: Sep 14, 2011, 8:01 PM
  2. Direct Event and Daynamic UserControl
    By HosseinHelali in forum 1.x Help
    Replies: 0
    Last Post: Jul 04, 2011, 5:47 AM
  3. Replies: 1
    Last Post: Mar 11, 2011, 2:54 PM
  4. Replies: 3
    Last Post: Apr 20, 2010, 12:21 PM
  5. [CLOSED] Layout problem and Direct Event keeps firing
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 14, 2010, 5:01 PM

Tags for this Thread

Posting Permissions