[CLOSED] howto address store when reading a record from store by javascript?

  1. #1

    [CLOSED] howto address store when reading a record from store by javascript?

    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>
    Last edited by Daniil; Sep 13, 2013 at 4:38 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    @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!
  4. #4
    Quote Originally Posted by tMp View Post
    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. 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').down('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>
    Quote Originally Posted by tMp View Post
    Or just point me in the right direction (link) so I can read about this contexts.
    Unfortunately, there is no an article about that.


    Quote Originally Posted by tMp View Post
    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.
  5. #5
    Thank you Daniil. Interesting stuff indeed, if not right now for this problem but for future possibilities!

Similar Threads

  1. Replies: 1
    Last Post: Dec 22, 2011, 6:17 AM
  2. [CLOSED] Create a new record for store by JavaScript?
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 01, 2011, 2:42 PM
  3. Replies: 16
    Last Post: May 26, 2011, 10:23 PM
  4. [CLOSED] Store.remove(record) and Store.reload()
    By capecod in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 08, 2010, 10:03 AM
  5. [CLOSED] Reading data from a store in codebehind
    By SFritsche in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 16, 2009, 5:11 PM

Posting Permissions