[FIXED] cool Window Behavior

  1. #1

    [FIXED] cool Window Behavior

    Hi Guys!

    Back in business with a few issues related to cool Window controls that probably you guys could help me to understand and solve:

    1. I've tried to show a cool Window from the server side, by using the Show() method, but it doesn't work when you call the method from a server side handler triggered from a control rendered inside an update panel. It simply does not show.

    2. The Window smart tag does not allow to select triggers for the window from controls inside a FormView (Naming containers?).

    3. When I try to show the window from a javascript function by using the Ext.get('windowId').show() but i got a javascript error because the javascript variable representing the window and the container div have the same name. (In my own basic implementation of a control like the cool window control i use different name for the html rendered containers and the javascript object to avoid this kind of thing)

    4. I can't make the window show from the server side wirthout having a full postback (since the cool controls should not be used inside update panels - as i understand). Any ideas?

    I know probably some of this issues are caused by me not seeing something but... I really could use some help

    Thanks in advance
  2. #2

    RE: [FIXED] cool Window Behavior



    Hi Oscar,

    It's taken me a while to test all your notes. I'm going to pick them off one by one. I'm starting with #3.

    Each Control is instantiated in DOM with it's client-side ID. If the server-side ID of your Window control is "Window1" and is not contained inside a INamingContainer (FormView, MasterPage, Repeater, etc), then the client-side ID will be "Window1".

    You can access the control in JavaScript directly with the "Window1" DOM object, just like you would server-side.

    Example

    // Shows "Window1" if hidden.
    Window1.show();
    NOTE If you are trying to get an instance of an Coolite/Ext component in JavaScript, you must use Ext.getCmp(), not Ext.get().

    Although, for most scenarios there's no need to use Ext.getCmp(), because the string id passed into getCmp() is already available in the DOM. But .getCmp() will still work.

    Example

    // Get an instance of "Window1"
    var temp = Ext.getCmp("Window1");
     
    // Show
    temp.show();
     
    // Or, just access "Window1" object directly
    Window1.show();
    The container 's are not given the same name as the control. Each control will have an associated container div which is given an id consisting of a concatenation of the .ClientID and "_Container".

    Example

    <div id="[.ClientID]_Container">
    
     
    <div id="Window1_Container">
    If a control contains a <Content> section, then a "_Content" is rendered as well.

    Example

    <div id="[.ClientID]_Content">
    
     
    <div id="Window1_Content">
    Using .getCmp() instead of .get() will probably solve the issue you were having in item #3.

    Hope this helps.
    Geoffrey McGill
    Founder
  3. #3

    RE: [FIXED] cool Window Behavior



    For reference, here's a sample demonstrating three techniques for attaching a "click" event to Coolite/Ext components or standard html elements.

    1. <ext:Button> with click <Listener>
    2. <ext:Button> with hand rolled click event
    3. Attach a click event to a standard html element

    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 runat="server">
        <title>Custom Show/Hide links</title>
        <ext:ScriptContainer ID="ScriptContainer1" runat="server" />
        <script type="text/javascript">
            Ext.onReady( function() {
                // Get an instance of each Button component
                var show = Ext.getCmp("Button3");
                var hide = Ext.getCmp("Button4");
                
                // Remove any click events
                show.events["click"].clearListeners();
                hide.events["click"].clearListeners();
                
                // Add custom click event
                show.on("click", function() { Window1.show(); });
                hide.on("click", function() { Window1.hide(); });
                
                
                // Get an instance of each link, then attached click event
                Ext.get("lnkShow").on("click", function() { Window1.show(); });
                Ext.get("lnkHide").on("click", function() { Window1.hide(); });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
    
            <h3>Button with Click &amp;lt;Listeners&amp;gt;</h3>
            <ext:Button ID="Button1" runat="server" Text="Show Window">
                <Listeners>
                    <Click Handler="function(){Window1.show();}" />
                </Listeners>
            </ext:Button>
            
            <ext:Button ID="Button2" runat="server" Text="Hide Window">
                <Listeners>
                    <Click Handler="function(){Window1.hide();}" />
                </Listeners>
            </ext:Button>
    
            <br />
            <h3>Button with custom click event attached</h3>
            <ext:Button ID="Button3" runat="server" Text="Show Window" />
            <ext:Button ID="Button4" runat="server" Text="Hide Window" />
    
            <br />
            <h3>Generic hyperlink link with custom click event attached</h3>
            <a href="#" id="lnkShow">Show Window</a><br />
            <a href="#" id="lnkHide">Hide Window</a>
            
            <ext:Window ID="Window1" runat="server" AutoShow="true" Title="Window" />
        </form>
    </body>
    </html>
    Geoffrey McGill
    Founder
  4. #4

    RE: [FIXED] cool Window Behavior

    Thanks a lot for your help Geoffrey! I am working in putting it together inside my code and as soon as I get some results I will let you know.

    Thanks for taking time to help me out.

    Cheers.



Similar Threads

  1. [CLOSED] Show Desktop window maximized - strange behavior
    By FAS in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 03, 2012, 5:58 PM
  2. Strange behavior with Window control
    By jlattimore in forum 1.x Help
    Replies: 1
    Last Post: May 30, 2011, 11:23 AM
  3. [CLOSED] Notification window behavior from 0.8.3 to 1.0
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 21, 2011, 2:02 PM
  4. [CLOSED] Window AutoWidth behavior
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 02, 2009, 9:41 AM
  5. new ajax.. on cool:window - help
    By davidee in forum 1.x Help
    Replies: 2
    Last Post: Mar 07, 2008, 5:38 AM

Posting Permissions