How to fix Window in Viewport

  1. #1

    How to fix Window in Viewport

    am using Viewport which is having Center and East area .
    Center is having a window. But when i open it in browser that window from center moves between Center and East area. How can i fix it so Window can move only in Center area.
  2. #2

    RE: How to fix Window in Viewport

    Hi designworxz,

    It is possible but on the <ext:Window> control you have to override the "renderTo" property with a <CustomConfig> value and set Constrain="true".

    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>Simple Constrain Window</title>
    </head>
    <body>
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
        <ext:Panel 
            ID="Panel1" 
            runat="server" 
            Title="My Panel" 
            Width="500" 
            Height="350" 
            />
        
        <ext:Window 
            ID="Window1" 
            runat="server" 
            Title="My Window" 
            Height="185" 
            Width="300"
            Constrain="true">
            <CustomConfig>
                <ext:ConfigItem Name="renderTo" Value="#{Panel1}.getBody()" Mode="Raw" />
            </CustomConfig>
        </ext:Window>
        
    </body>
    </html>
    Hope this helps.

    Geoffrey McGill
    Founder
  3. #3

    RE: How to fix Window in Viewport

    I added a new property CustomRenderTo property to all the Component controls which allows you to override the default RenderTo property without having to set a CustomConfig.

    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>Simple Constrain Window</title>
    </head>
    <body>
    *** <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" />
    *** 
    *** <ext:Panel 
    ******* ID="Panel1" 
    ******* runat="server" 
    ******* Title="My Panel" 
    ******* Width="500" 
    ******* Height="350"
    ******* Html="testing..."
    ******* />
    ******* 
    *** <ext:Window 
    ******* ID="Window1" 
    ******* runat="server" 
    ******* Title="My Window" 
    ******* Height="185" 
    ******* Width="300"
    ******* Constrain="true"
    ******* CustomRenderTo="={#{Panel1}.getBody()}"
    ******* />
    </body>
    </html>
    The CustomRenderTo property also demonstrates wrapping a value in tokens. The inner "clientid token" (#{ID}) will replace the controls .ID property with it's .ClientID. All controls are created on the client (browser) using their .ClientID property, which is unique and can be different than the server-side .ID property.

    The outer "raw script token" (={something}) will ensure the property is rendered a raw value instead of the default string which wraps the value in double quotes.

    Example

    // Set property with tokens...
    CustomRenderTo="={#{Panel1}.getBody()}"
    
    // renders the following to the client...
    renderTo: Panel1.getBody(),
    
    // Set property without tokens...
    
    CustomRenderTo="Panel1.getBody()"
    
    
    
    // renders the following to the client, which will not execute properly
    
    renderTo: "Panel1.getBody()",
    This new CustomRenderTo property will be included publicly with the v0.8.0 release.

    Hope this helps.
    Geoffrey McGill
    Founder
  4. #4

    RE: How to fix Window in Viewport



    Hi Geoffrey How to do in Viewport having BorderLayout

    
    <%@ Page Language="C#" %><%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
    <script runat="server">  
      
      protected void Page_Load(object sender, EventArgs e)
      {
        this.MyPanel.Html = @"<html>         
    <head>        <title>Test</title>        
    <style type='text/css'>        
    a {         color:#000000;         text-decoration:underline;        }       
    a:hover {         color:#AD842F;         text-decoration:none;        }       
    #condition a {         color:#fff;        }        </style>        
    </head>        
    <body bgcolor='#FFFFFF' text='#000000' topmargin='0'> 
    <table width='530' cellpadding='0' cellspacing='0' border='0' align='center'>     
    <tr>   <td align='middle'>   
    If you are having problems viewing this email point your web browser
    <a href='#'>here</a>.    <br><br>   </td>  </tr>    <tr bgcolor='#000000'>   <td align='middle'>
    <img src='#' border='0'></td>  </tr>   <tr>   <td align='middle'><img src='#' border='0'></td>  
    </tr>  <tr>   <td align='middle'><img src='#' border='0'></td>  </tr>      <tr>   <td>    
    <table width='100%' cellpadding='10' cellspacing='0' border='1' bordercolor='#dbdbdb'>     <tr bordercolor='#ffffff'>   
    <td>             
    <p>/span></p>       <br />                                   
    </td>   </tr>  </table>                             <img src='#' border='0'href='#BuyNowUrl#'/>     
    <table id='condition' width='100%' cellpadding='0' cellspacing='0' border='0' bgcolor='#FFFFFF' align='center'>        
    <tr><td><img src='#File' border='0' usemap='#Map' href='#'></td>        </tr>       </table>           
    <table width='100%' cellpadding='10' cellspacing='0' border='1' bordercolor='#DBDBDB' align='center' style='margin-top:3px;'>      
    </table>    <table width='100%' cellpadding='0' cellspacing='0' border='0' bordercolor='#DBDBDB' align='center'>    
    <tr><td align='left'><a href='#var#'>Click</a> to remove yourself from future emails.
    </td>      <td align='right'><a href='emailaddress#'>Click</a>
    to be sent text only emails in the future.</td>     </tr>    </table>       
    <table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>        <tr>    
    <td align='center'>       <br />       Please send feedback to 
    <a href=''></a>      </td>     </tr>    </table>      </td> </tr> </table> <br>    <map name='Map'>      
    <area shape='rect' coords='8,9,297,71' href='#' alt=''>      <area shape='rect' coords='324,14,535,57' href='#' alt=''>    
    </map></body></html>";
    
      }  
      
      protected void btn_Click(object sender, AjaxEventArgs e)
      {
    
        string htmlcode = @"<html>         
    <head>        <title>Test</title>        
    <style type='text/css'>        
    a {         color:#000000;         text-decoration:underline;        }       
    a:hover {         color:#AD842F;         text-decoration:none;        }       
    #condition a {         color:#fff;        }        </style>        
    </head>        
    <body bgcolor='#FFFFFF' text='#000000' topmargin='0'> 
    <table width='530' cellpadding='0' cellspacing='0' border='0' align='center'>     
    <tr>   <td align='middle'>   
    If you are having problems viewing this email point your web browser
    <a href='#'>here</a>.    <br><br>   </td>  </tr>    <tr bgcolor='#000000'>   <td align='middle'>
    <img src='#' border='0'></td>  </tr>   <tr>   <td align='middle'><img src='#' border='0'></td>  
    </tr>  <tr>   <td align='middle'><img src='#' border='0'></td>  </tr>      <tr>   <td>    
    <table width='100%' cellpadding='10' cellspacing='0' border='1' bordercolor='#dbdbdb'>     <tr bordercolor='#ffffff'>   
    <td>             
    <p>/span></p>       <br />                                   
    </td>   </tr>  </table>                             <img src='#' border='0'href='#BuyNowUrl#'/>     
    <table id='condition' width='100%' cellpadding='0' cellspacing='0' border='0' bgcolor='#FFFFFF' align='center'>        
    <tr><td><img src='#File' border='0' usemap='#Map' href='#'></td>        </tr>       </table>           
    <table width='100%' cellpadding='10' cellspacing='0' border='1' bordercolor='#DBDBDB' align='center' style='margin-top:3px;'>      
    </table>    <table width='100%' cellpadding='0' cellspacing='0' border='0' bordercolor='#DBDBDB' align='center'>    
    <tr><td align='left'><a href='#var#'>Click</a> to remove yourself from future emails.
    </td>      <td align='right'><a href='emailaddress#'>Click</a>
    to be sent text only emails in the future.</td>     </tr>    </table>       
    <table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>        <tr>    
    <td align='center'>       <br />       Please send feedback to 
    <a href=''></a>      </td>     </tr>    </table>      </td> </tr> </table> <br>    <map name='Map'>      
    <area shape='rect' coords='8,9,297,71' href='#' alt=''>      <area shape='rect' coords='324,14,535,57' href='#' alt=''>    
    </map></body></html>";
    
        MyPanel.Html = htmlcode.ToString();
    
    
      }
      
      </script>
      
      <!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>Setting Panel Body with Html</title></head><body>   
       <form id="form1" runat="server">       
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" />     
                       <ext:ViewPort ID="ViewPort1" runat="server">
                <Body>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        
                        <Center>
                        <ext:Panel ID="PanelCenter" runat="server" Title="Preview">
                         
                         </ext:Panel> 
                         <ext:Window ID="MyPanel" runat="server" Title="Test" Height="300" Width="400" Html="Click Save Button..." Constrain="true" >   
                             <CustomConfig>            <ext:ConfigItem Name="renderTo" Value="#{PanelCenter}.getBody()" Mode="Raw" />        </CustomConfig>                
                          </ext:Window> 
                          
                                
                        </Center>
                        <East Collapsible="true" Split="true" MinWidth="350">
                            <ext:Panel ID="EastPanel" runat="server" Width="350" AutoHeight="true" Title="Settings" BodyStyle="padding: 6px;" >
                                 
                                    <Body>
                                        
                                        
                                        
                                        <ext:Panel 
                                            ID="Panel1" 
                                            runat="server" 
                                            Title="Image" 
                                            Height="80px" 
                                            BodyStyle="padding: 6px;"
                                            Collapsible="True">
                                            <Body>
                                            <table style="width: 96%;">
                                                  <tr>
                                                      <td>
                                                          <table>
                                                              <tr>
                                                                  <td>
                                                                      <asp:FileUpload ID="fUpload" runat="server" 
                                                                          style="border-color:#b8b8b8;" CssClass="btn" Width="200px"  />
                                                                  </td>
                                                                  <td>
                                                                      <ext:Button ID="btnUpload" runat="server" Text="upload" >
                                                                      <AjaxEvents>
                                                                            <Click OnEvent="btn_Click">
                                                                                <EventMask ShowMask="true" />
                                                                            </Click>
                                                                       </AjaxEvents>
                                                                       
                                                                      <ToolTips>
                                                                         <ext:ToolTip ID="ToolTip1" runat="server" Title="Upload" Html="Uploads" />
                                                                      </ToolTips>
                                                                      </ext:Button> 
                                                                  </td>
                                                              </tr>
                                                              <tr>
                                                                  <td>
                                                                      <ext:Label ID="lblmessage" runat="server" />
                                                                     
                                                                  </td>
                                                                  <td>
                                                                      &amp;nbsp;</td>
                                                              </tr>
                                                          </table>
                                                      </td>
                                                      
                                                      
                                                  </tr>
                                                  
                                              </table>
                                            
                                            </Body>
                                            </ext:Panel>
                                       
                                        
                                    </Body>
                                    
                                    <Buttons>
                                      
                                    </Buttons>
                             
                            </ext:Panel>
                        </East>
                        
                    </ext:BorderLayout>
                </Body>
            </ext:ViewPort>
               </form>
               </body>
               </html>
  5. #5

    RE: How to fix Window in Viewport

    Any Luck ?

Similar Threads

  1. Replies: 3
    Last Post: Jun 22, 2012, 4:18 PM
  2. [CLOSED] Window in viewport not working
    By RCM in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 13, 2012, 6:08 PM
  3. Re: How to open a window outside a viewport
    By hahsm in forum 1.x Help
    Replies: 2
    Last Post: Apr 17, 2011, 11:26 AM
  4. Replies: 14
    Last Post: Mar 30, 2010, 7:08 PM
  5. [CLOSED] Move Window in viewport to entire page
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 06, 2008, 6:48 AM

Posting Permissions