PDA

View Full Version : [CLOSED] howto address store when reading a record from store by javascript?



tMp
Sep 12, 2013, 11:00 AM
Hi

I had the DirectMethod working perfectly when I added it to a change listener on the paging toolbar. The same DirectMethod isn't working when adding it to a click listener on a button. Do I address the store wrong from outside the context or is this a security issue? Thank you very much.

test.aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{

}
}

protected void loadTab(object sender, DirectEventArgs e)
{
// create demo datatable
DataTable dt = new DataTable();

DataColumn dc = new DataColumn("ID");
dt.Columns.Add(dc);
dc = new DataColumn("VALUE");
dt.Columns.Add(dc);
dc = new DataColumn("HIDDEN");
dt.Columns.Add(dc);

DataRow dr = dt.NewRow();
dr["ID"] = "1";
dr["VALUE"] = "One";
dr["HIDDEN"] = "hidden 1";

dt.Rows.Add(dr);

dr = dt.NewRow();
dr["ID"] = "2";
dr["VALUE"] = "Two";
dr["HIDDEN"] = "hidden 2";

dt.Rows.Add(dr);

dr = dt.NewRow();
dr["ID"] = "3";
dr["VALUE"] = "Three";
dr["HIDDEN"] = "hidden 2";

dt.Rows.Add(dr);


// Build JOb Panel, add items and insert data
Ext.Net.Panel panel = new Ext.Net.Panel
{
Title = "Panel",
ID = "pnlPANEL",
Height = 600,
StyleSpec = "marginTop:10px",
Items =
{
new Ext.Net.DataView {
ID = "dv",
Padding = 5,
ItemSelector = "div",
DisableSelection = true,
Store = {
new Ext.Net.Store {
ID = "STORE_dv", PageSize = 1,
Model = {
new Ext.Net.Model {
Fields = {
new Ext.Net.ModelField { Name = "ID", Type = Ext.Net.ModelFieldType.String },
new Ext.Net.ModelField { Name = "VALUE", Type = Ext.Net.ModelFieldType.String },
new Ext.Net.ModelField { Name = "HIDDEN", Type = Ext.Net.ModelFieldType.String }
},
IDProperty = "ID"
}
},
DataSource = dt,
Sorters = { new Ext.Net.DataSorter { Property = "VALUE", Direction = Ext.Net.SortDirection.DESC } }
}
},
Tpl = new XTemplate {
Html = @"<tpl for=""."">
<div>{ID}<br />{VALUE}
</div>
</tpl>"
}
}
},
BottomBar = {
new PagingToolbar {
HideRefresh = true,
StoreID = "STORE_dv",
DisplayMsg = ""
}
}
};

panel.AddTo(this.PANEL);

panel = new Ext.Net.Panel
{
Layout = "HBoxLayout",
Border = false,
Items = { new Ext.Net.Button { Text = "Click me!", OnClientClick = "App.direct.onClick(#{STORE_dv}.getAt(0).get('ID')) ;" } }
};

panel.AddTo(this.PANEL);
}

// On Change
[DirectMethod]
public void onClick(string ID)
{
X.Msg.Alert("Demo", ID).Show();
}
}

test.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form" runat="server">

<ext:ResourceManager ID="ResourceManager" runat="server" />

<!-- TAB DETAILS -->
<ext:TabPanel runat="server" ID="TAB" MinTabWidth="100">
<Items>
<ext:Panel ID="PANEL" runat="server" Title="Panel"><DirectEvents><Activate OnEvent="loadTab" /></DirectEvents></ext:Panel>
</Items>
</ext:TabPanel>


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

Daniil
Sep 12, 2013, 1:13 PM
Hi @tMp,

#{} is not going to work in your scenario.

I can suggest the following solution, see OnClientClick.

Example

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

<%@ Import Namespace="System.Data" %>

<script runat="server">
protected void loadTab(object sender, DirectEventArgs e)
{
// create demo datatable
DataTable dt = new DataTable();

DataColumn dc = new DataColumn("ID");
dt.Columns.Add(dc);
dc = new DataColumn("VALUE");
dt.Columns.Add(dc);
dc = new DataColumn("HIDDEN");
dt.Columns.Add(dc);

DataRow dr = dt.NewRow();
dr["ID"] = "1";
dr["VALUE"] = "One";
dr["HIDDEN"] = "hidden 1";

dt.Rows.Add(dr);

dr = dt.NewRow();
dr["ID"] = "2";
dr["VALUE"] = "Two";
dr["HIDDEN"] = "hidden 2";

dt.Rows.Add(dr);

dr = dt.NewRow();
dr["ID"] = "3";
dr["VALUE"] = "Three";
dr["HIDDEN"] = "hidden 2";

dt.Rows.Add(dr);

Store store = new Ext.Net.Store
{
ID = "STORE_dv",
PageSize = 1,
Model =
{
new Ext.Net.Model
{
Fields =
{
new Ext.Net.ModelField { Name = "ID", Type = Ext.Net.ModelFieldType.String },
new Ext.Net.ModelField { Name = "VALUE", Type = Ext.Net.ModelFieldType.String },
new Ext.Net.ModelField { Name = "HIDDEN", Type = Ext.Net.ModelFieldType.String }
},
IDProperty = "ID"
}
},
DataSource = dt,
Sorters = { new Ext.Net.DataSorter { Property = "VALUE", Direction = Ext.Net.SortDirection.DESC } }
};

// Build JOb Panel, add items and insert data
Ext.Net.Panel panel = new Ext.Net.Panel
{
Title = "Panel",
ID = "pnlPANEL",
Height = 600,
StyleSpec = "marginTop:10px",
Items =
{
new Ext.Net.DataView {
ID = "dv",
Padding = 5,
ItemSelector = "div",
DisableSelection = true,
Store = { store },
Tpl = new XTemplate {
Html = @"<tpl for=""."">
<div>{ID}<br />{VALUE}
</div>
</tpl>"
}
}
},
BottomBar = {
new PagingToolbar {
HideRefresh = true,
StoreID = "STORE_dv",
DisplayMsg = ""
}
}
};

panel.AddTo(this.PANEL);

panel = new Ext.Net.Panel
{
Layout = "HBoxLayout",
Border = false,
Items =
{
new Ext.Net.Button
{
Text = "Click me!",
OnClientClick = string.Format("App.direct.onClick({0}.getAt(0).get('ID'));", store.ClientID)
}
}
};

panel.AddTo(this.PANEL);
}

[DirectMethod]
public void onClick(string ID)
{
X.Msg.Alert("Demo", ID).Show();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:TabPanel ID="TAB" runat="server" MinTabWidth="100">
<Items>
<ext:Panel ID="PANEL" runat="server" Title="Panel">
<DirectEvents>
<Activate OnEvent="loadTab" />
</DirectEvents>
</ext:Panel>
</Items>
</ext:TabPanel>
</form>
</body>
</html>


P.S. First of all, thank you for the good samples you provide us with! It might event better a bit, if you put the code behind direct to ASPX markup and leave

<%@ Page Language="C#" %>
at the top. As I did above.

As a result we are getting a standalone ASPX page which everyone can copy, paste and run without any changes.

tMp
Sep 13, 2013, 9:51 AM
@Daniil

Thanks for your suggestions - they work - as usual - pefect! Why isn't the #{}-way working in this scenario? Security measure of javascript or....? Or just point me in the right direction (link) so I can read about this contexts.

as for the examples: Sorry about the additional work. I just tried to keep the examples as near to my settings at work as possible. From now on I will deliver them as wished in one single file.

Thank you very much for everything!

Daniil
Sep 13, 2013, 1:41 PM
Why isn't the #{}-way working in this scenario? Security measure of javascript or....? Or just point me in the right direction (link) so I can read about this contexts.


No security reasons. There is a technical reason. #{} can't find the Store control in your scenario, because it is not added (hierarchically) into any Controls collection. The AddTo method doesn't that, it just renders the stuff.

So, you could add it to any Controls collection manually. For example, if you uncomment the two commented code lines in this sample, the #{} will do its job.

Example

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

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

<script runat="server">
protected void Render(object sender, DirectEventArgs e)
{
GridPanel grid = new GridPanel();
grid.Store.Add(new Store()
{
ID = "Store1",
Model =
{
new Model()
}
});
//this.Form.Controls.Add(grid);
grid.AddTo(this.Form);

Ext.Net.Button btn = new Ext.Net.Button();
btn.Handler = "alert('#{Store1}')";
//this.Form.Controls.Add(btn);
btn.AddTo(this.Form);
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Button runat="server" Text="Render" OnDirectClick="Render" />
</form>
</body>
</html>


Though, I still recommend the way with ClientID which I suggested before. Well, the #{} stuff is rather supposed to be used in markup, not in code behind.

By the way, there is another way to resolve the problem using ComponentQuery (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ComponentQuery). Search for "!!!" comments in the example below. It is a bit cumbersome in that specific scenario. But it is worth, at least, to be aware of such the functionality, isn't?

Example

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

<%@ Import Namespace="System.Data" %>

<script runat="server">
protected void loadTab(object sender, DirectEventArgs e)
{
// create demo datatable
DataTable dt = new DataTable();

DataColumn dc = new DataColumn("ID");
dt.Columns.Add(dc);
dc = new DataColumn("VALUE");
dt.Columns.Add(dc);
dc = new DataColumn("HIDDEN");
dt.Columns.Add(dc);

DataRow dr = dt.NewRow();
dr["ID"] = "1";
dr["VALUE"] = "One";
dr["HIDDEN"] = "hidden 1";

dt.Rows.Add(dr);

dr = dt.NewRow();
dr["ID"] = "2";
dr["VALUE"] = "Two";
dr["HIDDEN"] = "hidden 2";

dt.Rows.Add(dr);

dr = dt.NewRow();
dr["ID"] = "3";
dr["VALUE"] = "Three";
dr["HIDDEN"] = "hidden 2";

dt.Rows.Add(dr);

// Build JOb Panel, add items and insert data
Ext.Net.Panel panel = new Ext.Net.Panel
{
Title = "Panel",
ID = "pnlPANEL",
ItemID = "panelWithDataView", // !!! added
Height = 600,
StyleSpec = "marginTop:10px",
Items =
{
new Ext.Net.DataView {
ID = "dv",
Padding = 5,
ItemSelector = "div",
DisableSelection = true,
Store =
{
new Ext.Net.Store
{
ID = "STORE_dv",
PageSize = 1,
Model =
{
new Ext.Net.Model
{
Fields =
{
new Ext.Net.ModelField { Name = "ID", Type = Ext.Net.ModelFieldType.String },
new Ext.Net.ModelField { Name = "VALUE", Type = Ext.Net.ModelFieldType.String },
new Ext.Net.ModelField { Name = "HIDDEN", Type = Ext.Net.ModelFieldType.String }
},
IDProperty = "ID"
}
},
DataSource = dt,
Sorters = { new Ext.Net.DataSorter { Property = "VALUE", Direction = Ext.Net.SortDirection.DESC } }
}
},
Tpl = new XTemplate
{
Html = @"<tpl for=""."">
<div>{ID}<br />{VALUE}
</div>
</tpl>"
}
}
},
BottomBar = {
new PagingToolbar {
HideRefresh = true,
StoreID = "STORE_dv",
DisplayMsg = ""
}
}
};

panel.AddTo(this.PANEL);

panel = new Ext.Net.Panel
{
Layout = "HBoxLayout",
Border = false,
Items =
{
new Ext.Net.Button
{
Text = "Click me!",
OnClientClick = @"var store = this.up('tabpanel').down('#panelWithDataView').dow n('dataview').getStore();
alert(store.getAt(0).get('ID'));" // !!!
}
}
};

panel.AddTo(this.PANEL);
}

[DirectMethod]
public void onClick(string ID)
{
X.Msg.Alert("Demo", ID).Show();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:TabPanel ID="TAB" runat="server" MinTabWidth="100">
<Items>
<ext:Panel ID="PANEL" runat="server" Title="Panel">
<DirectEvents>
<Activate OnEvent="loadTab" />
</DirectEvents>
</ext:Panel>
</Items>
</ext:TabPanel>
</form>
</body>
</html>


Or just point me in the right direction (link) so I can read about this contexts.


Unfortunately, there is no an article about that.




as for the examples: Sorry about the additional work. I just tried to keep the examples as near to my settings at work as possible. From now on I will deliver them as wished in one single file.


Thank you! Really appreciated.

tMp
Sep 13, 2013, 2:40 PM
Thank you Daniil. Interesting stuff indeed, if not right now for this problem but for future possibilities!