PDA

View Full Version : [FIXED] cool Window Behavior



oskarni
Apr 17, 2008, 11:35 AM
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

geoffrey.mcgill
Apr 19, 2008, 2:25 AM
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
Apr 19, 2008, 3:07 AM
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>

oskarni
Apr 21, 2008, 10:20 AM
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.