PDA

View Full Version : [CLOSED] How to - Window



adelaney
May 17, 2012, 3:49 PM
I have a window that I would like to pop up on one of my pages. The window's content will be another one of my site's pages, but the id portion of the URL needs to be set from a command button in a grid.

First, how do I set the javascript in my grid command button to use a value from my store - e.g. javascriptFuntion(IDvalueFromGridRow)

Second, how do I make the window's URL dynamic? I have followed the sample here:http://examples2.ext.net/#/Window/Basic/Load_External_Website/ and in my javascript, I simply update the loader:

function openCedentsWindow(val) {
App.CedentAssignment.loader.url += val.toString();
App.CedentAssignment.show();
}
but it didn't work. (Once I went back and hard set the value in the loader's URL property, it did.)

Finally, I want to be sure to "destroy" the window's reference to the URL once it closes so that it always comes up loading a new URL and not maintain the old content. What is the function/config for that?

Daniil
May 17, 2012, 7:44 PM
Hi,

The following example answers the questions, please see the comments within the Command listener.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" }
};
store.DataBind();
}
}
</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 runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
<ext:ImageCommandColumn runat="server">
<Commands>
<ext:ImageCommand CommandName="test" Icon="Accept" />
</Commands>
<Listeners>
<Command Handler="App.Window1.clearContent(); //to don't see the previous content
App.Window1.show();
App.Window1.load({ //this is how you can load a custom URL with custom parameters
url : 'Test.aspx',
params : {
test : record.get('test') //the record is passed as an argument of Command listener
}
});"/>
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
<ext:Window ID="Window1" runat="server" Hidden="true">
<Loader runat="server" Mode="Frame" AutoLoad="false">
<LoadMask ShowMask="true" />
</Loader>
</ext:Window>
</html>

adelaney
May 17, 2012, 7:57 PM
This is very helpful. Thanks. I am assuming that I can just as easily pass a function call just like wrtining inline code, right?

Daniil
May 17, 2012, 8:04 PM
I am assuming that I can just as easily pass a function call just like wrtining inline code, right?

Do you mean in the markup? Yes, you can.

But for a real application I would prefer this way.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1" },
new object[] { "test2" },
new object[] { "test3" }
};
store.DataBind();
}
}
</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 runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var onCommand = function (column, command, record, recordIndex, cellIndex) {
App.Window1.clearContent(); //to don't see the previous content
App.Window1.show();
App.Window1.load({ //this is how you can load a custom URL with custom parameters
url : 'Test.aspx',
params : {
test : record.get('test') //the record is passed as an argument of Command listener
}
});
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
<ext:ImageCommandColumn runat="server">
<Commands>
<ext:ImageCommand CommandName="test" Icon="Accept" />
</Commands>
<Listeners>
<Command Fn="onCommand" />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>

<ext:Window ID="Window1" runat="server" Hidden="true">
<Loader runat="server" Mode="Frame" AutoLoad="false">
<LoadMask ShowMask="true" />
</Loader>
</ext:Window>
</html>