Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

Page 1 of 2 12 LastLast
  1. #1

    Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    NOTE: This is similar to the post I did the other day. I fixed the 'http' prefix in the AutoLoad so no IFRAME should be in play. Still the size of the North Panel doesn't flow when its contents are changed.

    Below is a code snippit of what I'm trying to do. In the SearchBar.aspx page I print 'count' number of 's with some text, changing the height of the rendered html. What I am expecting is the NorthPanel to expand and contract its height to fit only the html rendered.

    The AutoHeight=true sounds like it should do the trick, but has no effect I can see.

    I did stumple on .doAutoLoad(), which has to be called for the change in the .autoload string to be processed. I tried the .doLayout() function, but that did not resize the panel.

    Can this be done and how? Do I need to wrap the Panel in a FitLayout or something?


    
    
    
    
    function OnComboBoxChange(el) {
    
    
    var text = el.value;
    
    
    var count = el.lastSelectionText;
    
    
    NorthPanel.autoLoad = "//localhost:2526/Prototype/Framework/SearchBar.aspx?Count="+count+"&Data="+tText;
    
    
    NorthPanel.doAutoLoad();
    }
  2. #2

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    Hi Randy,

    Maybe try NorthPanel.syncSize() in JavaScript or NorthPanel.SyncSize() from C#/VB after the Panels body has been updated. I'm assuming "NorthPanel" is the ID of the <ext:Panel>.*




    Geoffrey McGill
    Founder
  3. #3

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    Tried adding .syncSize() after .doAutoLoad(), still nothing.

    Need an example?

  4. #4

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    Need*an example?
    That would help speed things along.




    Geoffrey McGill
    Founder
  5. #5

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad



    Ok here is the example. There are two pages, 'Default.aspx' and 'aForm.aspx'.

    Default.aspx containers a ViewPort. The NorthPanel autoLoads aForm.aspx with a Count argument of 1 which causes aForm.aspx to render 1 row. The WestPanel contains a ComboBox, and selecting values causes the NorthPanel.autoLoad to be updated with a path to aForm.aspx with a new Count value so a differnt numbers of rows is rendered.

    When NorthPanel.AutoHeight=true, the NorthPanel does resize, but it slides down behind the West and Center Panels, rather than sliding them down which is what I want.

    Default.aspx
    <%@ 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 runat="server">
        <title></title>
        <script type="text/javascript">
          function OnSelectorChange(el) 
          {
            var selCount  = el.value;
            var selText = el.lastSelectionText;
    
    
            NorthPanel.autoLoad = "aForm.aspx?Count="+selCount+"&amp;Text="+selText;
            NorthPanel.doAutoLoad();
            
            //NorthPanel.syncSize();  // Has No Effect
            //NorthPanel.doLayout(); // Has No Effect
          }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        
        <ext:ScriptManager ID="ScriptManager" runat="server" />
          <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
              <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North Collapsible="True" Split="True" >
                  <ext:Panel ID="NorthPanel" runat="server" AutoHeight="true" Title="North" AutoLoad="aForm.aspx?Text=InitLoad&amp;Count=1" ></ext:Panel>
                </North>
                <West Collapsible="true" Split="true">
                  <ext:Panel ID="Panel4" runat="server" Title="West" Width="175">
                    <Body>
                      <ext:ComboBox ID="Selector" runat="server">
                        <Items>
                          <ext:ListItem Text="One" Value="1" />
                          <ext:ListItem Text="Two" Value="2" />
                          <ext:ListItem Text="Four" Value="4" />
                          <ext:ListItem Text="Six" Value="6" />
                          <ext:ListItem Text="Eight" Value="8" />
                        </Items>
                        <Listeners>
                          <Select Fn="OnSelectorChange" />                      
                        </Listeners>
                      </ext:ComboBox>
                    </Body>
                  </ext:Panel>
                </West>
                <Center>
                  <ext:Panel ID="Panel7" runat="server" Title="Center">
                    <Body>
                      <ext:FitLayout ID="FitLayout2" runat="server">
                        <ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="0" Border="false" Title="Center">
                          <Tabs>
                            <ext:Tab ID="Tab3" runat="server" Closable="true" Title="Tab 1"></ext:Tab>
                            <ext:Tab ID="Tab4" runat="server" Title="Tab 2"></ext:Tab>
                          </Tabs>
                        </ext:TabPanel>
                      </ext:FitLayout>
                    </Body>
                  </ext:Panel>
                </Center>
              </ext:BorderLayout>
            </Body>
          </ext:ViewPort>
        
    
        </form>
    </body>
    </html>
    aForm.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="aForm.aspx.cs" Inherits="Example_Coolite01.aForm" %>
    
    
    <!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></title>
      <script type="text/C#" runat="server">
        protected void Page_Init(object sender, EventArgs e)
        {
          string text   = !string.IsNullOrEmpty(Request.Params["Text"]) ? Request.Params["Text"] : "NoText" ;
          string sCount = !string.IsNullOrEmpty(Request.Params["Count"]) ? Request.Params["Count"] : "1" ;
          int     count = int.Parse(sCount);
          
          string msg = string.Format("Selection=[{0}]", text);
          for(int i=0; i<count; i++)
            _body.Controls.Add(new LiteralControl(string.Format("{0}
    ",msg)));        
        }
      </script>
    </head>
      <body id="_body" runat="server"></body>
    </html>


  6. #6

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    Hi Randy,

    This Panel AutoHeight issue is related to the AutoLoad property, or specifically the lack of properties available on the AutoLoad property.

    As mentioned in another forum post, we're working on an overhaul of the .AutoLoad property, I was able to get your sample working with the following revised code.

    Please notice the LoadConfig object passed into the AutoLoad property and the callback function which fires after the url has been loaded. The callback function fires .syncSize() on the ViewPort, which does a re-calc on the dimensions.

    The .load() function is used to fetch the new url when the ComboBox is changed. The same/similar LoadConfig object is passed into the .load() function.

    Example

    <%@ 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></title>
        <script type="text/javascript">
            function OnSelectorChange(el) {
                var selCount = el.value;
                var selText = el.lastSelectionText;
    
                NorthPanel.load({
                    url: "Child.aspx?Count=" + selCount + "&amp;Text=" + selText,
                    callback: function() { ViewPort1.syncSize(); }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        
        <ext:ScriptManager ID="ScriptManager" runat="server" />
          <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
              <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North Collapsible="True" Split="True">
                  <ext:Panel 
                    ID="NorthPanel" 
                    runat="server"
                    AutoHeight="true" 
                    Title="North">
                    <CustomConfig>
                        <ext:ConfigItem Name="autoLoad" Value="{url: 'Child.aspx?Text=InitLoad&amp;Count=1', callback: function(){ViewPort1.syncSize();}}" Mode="Raw" />
                    </CustomConfig>    
                </ext:Panel>
                </North>
                <West Collapsible="true" Split="true">
                  <ext:Panel ID="Panel4" runat="server" Title="West" Width="175">
                    <Body>
                      <ext:ComboBox ID="Selector" runat="server">
                        <Items>
                          <ext:ListItem Text="One" Value="1" />
                          <ext:ListItem Text="Two" Value="2" />
                          <ext:ListItem Text="Four" Value="4" />
                          <ext:ListItem Text="Six" Value="6" />
                          <ext:ListItem Text="Eight" Value="8" />
                        </Items>
                        <Listeners>
                          <Select Fn="OnSelectorChange" />                      
                        </Listeners>
                      </ext:ComboBox>
                    </Body>
                  </ext:Panel>
                </West>
                <Center>
                  <ext:Panel ID="Panel7" runat="server" Title="Center">
                    <Body>
                      <ext:FitLayout ID="FitLayout2" runat="server">
                        <ext:TabPanel ID="TabPanel2" runat="server" ActiveTabIndex="0" Border="false" Title="Center">
                          <Tabs>
                            <ext:Tab ID="Tab3" runat="server" Closable="true" Title="Tab 1"></ext:Tab>
                            <ext:Tab ID="Tab4" runat="server" Title="Tab 2"></ext:Tab>
                          </Tabs>
                        </ext:TabPanel>
                      </ext:FitLayout>
                    </Body>
                  </ext:Panel>
                </Center>
              </ext:BorderLayout>
            </Body>
          </ext:ViewPort>
        
    
        </form>
    </body>
    </html>
    You will be able to set all these config objects within markup shortly. The revisions to .AutoLoad will be included in the final v0.7 release.

    Hope this helps.

    Geoffrey McGill
    Founder
  7. #7

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    Thanks, I think I see what is going on here.

    Will the refactored AutoLoad be in the 0.7 release?
  8. #8

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    Will the refactored AutoLoad be in the 0.7 release?
    That's the goal, although it will mean a "breaking change" to v0.7 and to get to the statge of committing this revised code into SVN will take a while. Maybe a week. We need to give notice of the breaking change and provide a tutorial on upgrading to the new code.

    It's a simple change and will be very simple to upgrade your code, although if you are using .AutoLoad or .AutoLoadIFrame, your code will be affected.

    Example (NOT FINAL)

    // AutoLoad Existing (v0.6-)
    <ext:Panel runat="server" Title="MyPanel" AutoLoad="Child.aspx />
    
    // AutoLoad Proposed (v0.7+)
    <ext:Panel ID="Panel1" runat="server" Title="MyPanel">
        <AutoLoad Url="Child.aspx" />
    </ext:Panel>
    
    
    // AutoLoadIFrame Existing (v0.6-)
    <ext:Panel ID="Panel2" runat="server" Title="MyPanel" AutoLoadIFrame="Child.aspx />
    
    // AutoLoadIFrame Proposed (v0.7+)
    <ext:Panel ID="Panel3" runat="server" Title="MyPanel">
        <AutoLoad Url="Child.aspx" Mode="IFrame" />
    </ext:Panel>
    It's unfortunate that we have to introduce a breaking change, but this one is required. The AutoLoad property is very powerful, but in it's current state it's just not going to work how one would expect/require.

    We will be posting more details soon.

    Geoffrey McGill
    Founder
  9. #9

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    Geoffrey;

    I like the syntax change, seems much more flexible.

    What about the other issues with the 'merge' mode of AutoLoad:

    1) The referenced page can't render Coolite Controls
    2) The referenced page must have its own ScriptManager to compile, and the ScriptManagerProxy doesn't seem to be implemented yet.
    3) The referenced page can't have a <form> as is really a html snipit not a page. (See earlier comments on ITemplate and .ascx)

    Any comment on these? Or is there already a solution to 1 &amp; 2?

    -Randy
  10. #10

    RE: Auto Resize Panel in ViewPort on client-side Panel.AutoLoad

    1) The referenced page can't render Coolite Controls
    Yes this does work, but Scripts=true must be set in the AutoLoad config object. That will be the default property value

    2) The referenced page must have its own ScriptManager to compile, and*the*ScriptManagerProxy doesn't seem to be implemented yet.

    A ScriptManager will be required on child Page. The ScriptManagerProxy is only really applicable when adding controls to a UserControl (.ascx).

    3) The referenced page can't have a <form> as is really a html snipit not a page.* (See earlier comments on ITemplate and .ascx)

    Yes and No. If the Parent Control is within a <form>, then the child will not be able to have a <form> wrapper. It's kind of one, or the other.


    ...as is*really a html snipit not a page

    Correct. The "html" from the Child page is added to the Parent. The Controls in the Child will not participate in any life-cycle of the Parent and will not maintain ViewState if a PostBack occurs.*


    If the Child Page contains form controls (i.e. TextField, Checkbox, etc), those input fields will still be submitted with the Parent, but their values will only be available in the Parent and only from the Request object.*


    Example


    this.Request.Form["TextField1"]

    I'm going to implement everything under a .AutoLoad2 property and commit to SVN. Then at some point before the v0.7 release we'll switch over to just .AutoLoad.


    I'll also be posting some code samples.*
    *


    Geoffrey McGill
    Founder
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Resize Region in ViewPort via client-script
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 24, 2011, 7:17 PM
  2. Problem in Enable panel on client side
    By Rupesh in forum 1.x Help
    Replies: 1
    Last Post: Dec 15, 2010, 2:44 PM
  3. Replies: 1
    Last Post: Jun 10, 2010, 11:28 AM
  4. Set Panel Icon Client Side
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Apr 29, 2009, 2:21 PM
  5. [CLOSED] Auto Resize of North Panel in ViewPort on Panel.AutoLoad
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 19, 2008, 12:13 AM

Posting Permissions