PDA

View Full Version : Javascript error when setting ext:Window's AutoLoad to aspx page



jchau
Jul 10, 2008, 3:24 PM
When ext:Window's AutoLoad property is set to an aspx page, IE 7 throws a javascript error when the page loads. If someone has an example of using ext:Window to load up a picker dialog and send the picked item back to the parent, I would really really appreciate it. This seems like a very simple and common scenario but I can not get it to work with ext:window.

Example:

Website with two aspx page, Default.aspx and DialogPicker.aspx

Default.aspx


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Coolitewindow._Default" %>

<%@ 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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptContainer ID="ScriptContainer1" runat="server">

<script type="text/javascript" language="javascript">
function setReturnValue(val) {
var txt = &#100;ocument.getElementById('txtPickedValue');
txt.value=val;
}
</script>

</ext:ScriptContainer>
<ext:ScriptManager ID="ScriptManager1" runat="server">
</ext:ScriptManager>

<asp:Button ID="btnPicker" runat="server" Text="Pick Something" />
<ext:TextField ID="txtPickedValue" runat="server">
</ext:TextField>
<ext:Window ID="winPicker" runat="server" Icon="DatabaseConnect" Title="Picker" Show&#111;nload="false"
AnimateTarget="btnPicker" TriggerElement="btnPicker" Modal="true" CloseAction="Hide"
Height="300px" Width="100px" AutoShow="false" AutoLoad="DialogPicker.aspx">
</ext:Window>


</form>
</body>
</html>



DialogPicker.aspx


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DialogPicker.aspx.vb"
Inherits="Coolitewindow.DialogPicker" %>

<%@ 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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptContainer ID="ScriptContainer1" runat="server">

<script type="text/javascript" language="javascript">
function returnValue() {
var parent = window.opener
parent.setReturnValue('Something was picked.');
self.close();
}
</script>

</ext:ScriptContainer>
<ext:ScriptManager ID="ScriptManager1" runat="server">
</ext:ScriptManager>

<ext:Button ID="btnReturnValue" runat="server" Text="Return something">
<listeners>
<Click Handler="returnValue();" />
</listeners>
</ext:Button>


</form>
</body>
</html>

jchau
Jul 10, 2008, 3:36 PM
Another question. Why does ext:Window load the url specified when the page loads? Shouldn't it load the url when it is shown? Is it possible to dynamically set that AutoLoad property? For example, I want to dynamically set the query string parameter for that url before the window is shown.

Diabolicus
Jul 10, 2008, 9:33 PM
This is how I use to set AutoLoad from CodeBehind.


Default.aspx.cs (following your sample file name - ID &amp; sid are just for example)



protected void Page_Load(object sender, EventArgs e)
{
string sid = Request.QueryString["sid"];
string ID = Request.QueryString["ID"];
winPicker.AutoLoad = "DialogPicker.aspx?ID=" + ID + "&amp;sid=" + sid;
}

Vladimir
Jul 11, 2008, 11:41 AM
Hi jchau,

I'll investigate what's wrong in AutoLoad and then inform you. For now I can suggest next solution for picker functionality:

PickerExample.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PickerExample.aspx.cs" Inherits="Coolite.Sandbox.Temp.Pickup.PickerExample" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<%@ Register src="PickupDialogControl.ascx" tagname="PickupDialogControl" tagprefix="uc1" %>
<!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>The Picker</title>
</head>
<body>
<form id="form1" runat="server">

<script type="text/javascript">
function setTextField(value){
<%= TextField1.ClientID %>.setValue(value);
}
</script>

<ext:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<table>
<tr>
<td>
<ext:TextField ID="TextField1" ReadOnly="true" runat="server" />
</td>
<td>
<ext:Button ID="Button1" runat="server" Text="Pick value" AutoPostBack="false">
<Listeners>
<Click Handler="PickerDemo.pickValue({TextField1}.getValue(), setTextField);" />
</Listeners>
</ext:Button>
</td>
</tr>
</table>
<uc1:PickupDialogControl ID="PickupDialogControl1" runat="server" />
</form>
</body>
</html>



PickupDialogControl.ascx


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PickupDialogControl.ascx.cs" Inherits="Coolite.Sandbox.Temp.Pickup.PickupDialogControl" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

<script type="text/javascript">
Ext.namespace('PickerDemo');

PickerDemo.callback = Ext.emptyFn;

PickerDemo.pickValue = function(selectedValue, callback){
var picker = <%= WindowPicker.ClientID %>;

if(selectedValue &amp;&amp; selectedValue != null){
PickerDemo.setValue(selectedValue);
}
if(PickerDemo.callback &amp;&amp; PickerDemo.callback != null){
PickerDemo.callback = callback;
}
else{
PickerDemo.callback = Ext.emptyFn;
}

picker.show(null);
};

PickerDemo.returnValue = function(){
var picker = <%= WindowPicker.ClientID %>;
PickerDemo.callback(PickerDemo.getValue());
picker.hide(null);
};

PickerDemo.cancel = function(){
var picker = <%= WindowPicker.ClientID %>;
picker.hide(null);
};

PickerDemo.getValue = function(){
var radioButtons = &#100;ocument.getElementsByName("<%= RadioButtonList1.UniqueID %>");

for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
return radioButtons[i].value;
}
}
return '';
};

PickerDemo.setValue = function(value){
var radioButtons = &#100;ocument.getElementsByName("<%= RadioButtonList1.UniqueID %>");

for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].value == value) {
radioButtons[i].checked = true;
return;
}
}
radioButtons[0].checked = true;
}
</script>

<ext:Window
ID="WindowPicker" runat="server"
Icon="DatabaseConnect"
Title="Picker"
Show&#111;nload="false"
Modal="true"
Height="180">
<Content>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Value="Option 1" Text="Option 1" Selected="True"></asp:ListItem>
<asp:ListItem Value="Option 2" Text="Option 2"></asp:ListItem>
<asp:ListItem Value="Option 3" Text="Option 3"></asp:ListItem>
<asp:ListItem Value="Option 4" Text="Option 4"></asp:ListItem>
<asp:ListItem Value="Option 5" Text="Option 5"></asp:ListItem>
</asp:RadioButtonList>
</Content>
<Buttons>
<ext:Button ID="btnOkPicker" runat="server" Text="OK" AutoPostBack="false">
<Listeners>
<Click Handler="PickerDemo.returnValue();" />
</Listeners>
</ext:Button>
<ext:Button ID="btnCancelPicker" runat="server" Text="Cancel" AutoPostBack="false">
<Listeners>
<Click Handler="PickerDemo.cancel();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>



Let me know if this example is not what you wish.

Best regards,
Vladimir