Exception PageProxy in gridpanel

  1. #1

    Exception PageProxy in gridpanel

    https://examples1.ext.net/#/GridPane...ic_GridPanels/

    <H2>The control with ID 'StoreRow_S1' not found </H2>
    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic"%>
    <%@ Import Namespace="ListView=Ext.Net.ListView"%>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
    
    protected void Page_Load(object sender, EventArgs e)
    {
    if (X.IsAjaxRequest)
    {
    //We do not need to DataBind on an DirectEvent
    return;
    }
    
    List<object> data = new List<object>();
    
    
    for (int i = 1; i <= 10; i++)
    
    
    {
    
    
    data.Add(new { ID = "S" + i, Name = "Supplier " + i});
    
    
    }
    
    
    
    
    
    this.Store1.DataSource = data;
    
    
    this.Store1.DataBind();
    
    
    }
    
    
    
    
    
    private void RemoveFromCache(string id)
    
    
    {
    
    
    X.Js.Call("removeFromCache", id);
    
    
    }
    
    
    private void AddToCache(string id)
    
    
    {
    
    
    X.Js.Call("addToCache", id);
    
    
    }
    
    
    protected void BeforeExpand(object sender, DirectEventArgs e)
    
    
    {
    
    
    string id = e.ExtraParams["id"];
    
    
    
    
    
    Store store = new Store { ID = "StoreRow_"+id };
    
    
    JsonReader reader = new JsonReader();
    
    
    reader.IDProperty = "ID";
    
    
    reader.Fields.Add("ID", "Name");
    
    
    store.Reader.Add(reader);
    
    
    store.Proxy.Add(new Ext.Net.PageProxy());
    
    
    List<object> data = new List<object>();
    
    
    
    
    
    for (int i = 1; i <= 10; i++)
    
    
    {
    
    
    data.Add(new { ID = "P"+i, Name = "Product " + i });
    
    
    }
    
    
    store.DataSource = data;
    
    
    this.RemoveFromCache(store.ID);
    
    
    store.Render();
    
    
    this.AddToCache(store.ID);
    
    
    
    
    
    GridPanel grid = new GridPanel{
    
    
    ID = "GridPanelRow_"+id,
    
    
    StoreID = "{raw}StoreRow_" + id,
    
    
    Height = 200
    
    
    };
    
    
    
    
    
    grid.ColumnModel.Columns.Add(new Column
    
    
    {
    
    
    Header = "Products's Name",
    
    
    DataIndex = "Name"
    
    
    });
    
    
    grid.ColumnModel.ID = "GridPanelRowCM_" + id;
    
    
    grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });
    
    
    //important
    
    
    X.Get("row-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick"}, true);
    
    
    this.RemoveFromCache(grid.ID);
    
    
    grid.Render("row-" + id, RenderMode.RenderTo);
    
    
    this.AddToCache(grid.ID);
    
    
    }
    
    
    
    
    
    </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 id="Head1" runat="server">
    
    
    <title>RowExpander with GridPanel - Ext.NET Examples</title>
    
    
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
    
    
    
    
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
    
    
    
    
    
    <script type="text/javascript">
    
    
    window.lookup = [];
    
    
    
    
    
    var clean = function () {
    
    
    if (window.lookup.length > 0) {
    
    
    RowExpander1.collapseAll();
    
    
    
    
    
    Ext.each(window.lookup, function (control) {
    
    
    if (control) {
    
    
    control.destroy();
    
    
    }
    
    
    });
    
    
    
    
    
    window.lookup = [];
    
    
    } 
    
    
    };
    
    
    var removeFromCache = function(c) {
    
    
    var c = window[c];
    
    
    window.lookup.remove(c);
    
    
    
    
    
    if (c) {
    
    
    c.destroy();
    
    
    }
    
    
    };
    
    
    var addToCache = function(c) {
    
    
    window.lookup.push(window[c]);
    
    
    };
    
    
    </script>
    
    
    </head>
    
    
    <body>
    
    
    <form id="Form1" runat="server">
    
    
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
    
    
    
    
    <h1>Row Expander Plugin with GridPanel</h1>
    
    
    
    
    
    <p>The caching is presented, GridPanel renders once only (until view refresh)</p>
    
    
    
    
    
    <ext:Store ID="Store1" runat="server">
    
    
    <Reader>
    
    
    <ext:JsonReader IDProperty="ID">
    
    
    <Fields>
    
    
    <ext:RecordField Name="ID" />
    
    
    <ext:RecordField Name="Name" />
    
    
    </Fields>
    
    
    </ext:JsonReader>
    
    
    </Reader>
    
    
    </ext:Store>
    
    
    
    
    
    <ext:GridPanel 
    
    
    ID="GridPanel1" 
    
    
    runat="server" 
    
    
    StoreID="Store1" 
    
    
    TrackMouseOver="false"
    
    
    Title="Expander Rows with ListView" 
    
    
    Collapsible="true"
    
    
    AnimCollapse="true" 
    
    
    Icon="Table" 
    
    
    Width="600" 
    
    
    Height="600">
    
    
    <ColumnModel ID="ColumnModel1" runat="server">
    
    
    <Columns>
    
    
    <ext:Column Header="Supplier" DataIndex="Name" />
    
    
    </Columns>
    
    
    </ColumnModel>
    
    
    <View>
    
    
    <ext:GridView ID="GridView1" runat="server" ForceFit="true">
    
    
    <Listeners>
    
    
    <BeforeRefresh Fn="clean" />
    
    
    </Listeners>
    
    
    </ext:GridView>
    
    
    </View>
    
    
    <SelectionModel>
    
    
    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
    
    
    </SelectionModel>
    
    
    <Plugins>
    
    
    <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
    
    
    <Template ID="Template1" runat="server">
    
    
    <Html>
    
    
    <div id="row-{ID}" style="background-color:White;">
    
    
    
    </Html>
    
    
    </Template>
    
    
    <DirectEvents>
    
    
    <BeforeExpand 
    
    
    OnEvent="BeforeExpand" 
    
    
    Before="return !body.rendered;" 
    
    
    Success="body.rendered=true;">
    
    
    <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
    
    
    <ExtraParams>
    
    
    <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
    
    
    </ExtraParams>
    
    
    </BeforeExpand>
    
    
    </DirectEvents>
    
    
    </ext:RowExpander>
    
    
    </Plugins>
    
    
    </ext:GridPanel>
    
    
    </form>
    
    
    </body>
    
    
    </html>
    Last edited by geoffrey.mcgill; Jul 06, 2010 at 8:07 AM.
  2. #2

    RE: Exception PageProxy in gridpanel

    Hello!

    I think it's not a bug. A PageProxy makes a request to a page to get data. In other words a page is recreated and we have to recreate a store.

    So, please look at the example.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Exception PageProxy in gridpanel.aspx.cs"
        Inherits="Work.Bugs.Exception_PageProxy_in_gridpanel" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="ListView=Ext.Net.ListView" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (X.IsAjaxRequest)
            {
                //We do not need to DataBind on an DirectEvent
                return;
            }
    
            List<object> data = new List<object>();
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "S" + i, Name = "Supplier " + i });
            }
            this.Store1.DataSource = data;
            this.Store1.DataBind();
        }
    
        private void RemoveFromCache(string id)
        {
            X.Js.Call("removeFromCache", id);
        }
    
        private void AddToCache(string id)
        {
            X.Js.Call("addToCache", id);
        }
    
        protected void Page_Init(object sender, EventArgs e)
        {
            store = new Store { ID = "StoreRow" };
            store.Proxy.Add(new Ext.Net.PageProxy());
            JsonReader reader = new JsonReader();
            reader.IDProperty = "ID";
            reader.Fields.Add("ID", "Name");
            store.Reader.Add(reader);
            List<object> data = new List<object>();
            for (int i = 1; i <= 10; i++)
            {
                data.Add(new { ID = "P" + i, Name = "Product " + i });
            }
            store.DataSource = data;
            this.Form.Controls.Add(store); //important
        }
    
        protected void BeforeExpand(object sender, DirectEventArgs e)
        {
            string id = e.ExtraParams["id"];
            GridPanel grid = new GridPanel
            {
                ID = "GridPanelRow_" + id,
                StoreID = store.ID,
                Height = 200
            };
            grid.ColumnModel.Columns.Add(new Column
            {
                Header = "Products's Name",
                DataIndex = "Name"
            });
            grid.ColumnModel.ID = "GridPanelRowCM_" + id;
            grid.View.Add(new Ext.Net.GridView { ID = "GridPanelRowView_" + id, ForceFit = true });
            //important
            X.Get("row-" + id).SwallowEvent(new string[] { "click", "mousedown", "mouseup", "dblclick" }, true);
            this.RemoveFromCache(grid.ID);
            grid.Render("row-" + id, RenderMode.RenderTo);
            this.AddToCache(grid.ID);
        }
    
        private Store store;
        
    </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>RowExpander with GridPanel - Ext.NET Examples</title>
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
    
        <script type="text/javascript">
    
            window.lookup = [];
    
            var clean = function() {
                if (window.lookup.length > 0) {
                    RowExpander1.collapseAll();
    
                    Ext.each(window.lookup, function(control) {
                        if (control) {
                            control.destroy();
                        }
                    });
                    window.lookup = [];
                }
            };
            var removeFromCache = function(c) {
                var c = window[c];
                window.lookup.remove(c);
                if (c) {
                    c.destroy();
                }
            };
            var addToCache = function(c) {
                window.lookup.push(window[c]);
            };
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:JsonReader IDProperty="ID">
                    <Fields>
                        <ext:RecordField Name="ID" />
                        <ext:RecordField Name="Name" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" TrackMouseOver="false"
            Title="Expander Rows with ListView and PageProxy" Collapsible="true" AnimCollapse="true"
            Icon="Table" Width="600" Height="600">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Supplier" DataIndex="Name" />
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                    <Listeners>
                        <BeforeRefresh Fn="clean" />
                    </Listeners>
                </ext:GridView>
            </View>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <Plugins>
                <ext:RowExpander ID="RowExpander1" runat="server" EnableCaching="true">
                    <Template ID="Template1" runat="server">
                        <Html>
                        <div id="row-{ID}" style="background-color: White;">
    
                        </Html>
                    </Template>
                    <DirectEvents>
                        <BeforeExpand OnEvent="BeforeExpand" Before="return !body.rendered;" Success="body.rendered=true;">
                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={GridPanel1.body}" />
                            <ExtraParams>
                                <ext:Parameter Name="id" Value="record.id" Mode="Raw" />
                            </ExtraParams>
                        </BeforeExpand>
                    </DirectEvents>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
        </form>
    </body>
    </html>
    The Page_Init is invoked when the PageProxy makes the request to the Page.
    Last edited by geoffrey.mcgill; Jul 06, 2010 at 8:06 AM.

Similar Threads

  1. GridPanel Paging with PageProxy
    By jigpatel06 in forum 1.x Help
    Replies: 3
    Last Post: Mar 11, 2011, 10:33 AM
  2. Replies: 6
    Last Post: Dec 22, 2010, 1:41 PM
  3. Exception PageProxy in gridpanel row expander
    By 78fede78 in forum 1.x Help
    Replies: 1
    Last Post: Jul 15, 2010, 10:44 AM
  4. Add pageproxy at runtime
    By 78fede78 in forum 1.x Help
    Replies: 0
    Last Post: Jun 30, 2010, 3:20 PM
  5. [CLOSED] GridPanel Exception
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 06, 2008, 4:30 PM

Posting Permissions