Jan 17, 2012, 9:50 AM
Dynamically created UserControl with Store/PageProxy
Hi Ext.NET team!
and congratulations for your excellent job.
I'm having some problems with dynamically loaded controls....
In my master page I want to dynamically add a userControl into a panel
Here is the markup of the master page:
The userControl I'm trying to load contains a simple table grid with a DataStore. The DataStore has a PageProxy to allow remote loading of data.
Here is an excerpt of the markup file ucViewServiceRequests.ascx:
Ok... it looks fine, elegant and clean.... but.. it doesn't work!...
I get a strange client-side error (e.g. javascript error: expected(;)) when the master page is loaded (maybe the problem is in the userControl creation..).
If I try to remove the <ext:PageProxy /> tag from the userControl markup (and temporarily delete the OnRefreshData attribute from the <Store> element) the page is correctly loaded, the grid layout and columns are correctly displayed (although stored data are not retrieved..)
I'm very interested in dynamically created usercontrols, instead of using IFRAMES..
What's wrong with my implementation?
Any suggestion?
Thank you in advance
and congratulations for your excellent job.
I'm having some problems with dynamically loaded controls....
In my master page I want to dynamically add a userControl into a panel
Here is the markup of the master page:
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" Mode="Script" runat="server"></ext:ResourceManager>
<div>
<ext:Button ID="Button1" runat="server" Text="Create" Icon="Add"
ondirectclick="Button1_DirectClick">
</ext:Button>
<ext:Panel ID="Panel1" runat="server" Height="300" Title="Title">
<Items>
</Items>
</ext:Panel>
</div>
</form>
..and here is the codeBehind: public partial class TestUserControl : System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (this.ViewState["recreate"] != null)
{
var uc = LoadControl("ucViewServiceRequests.ascx");
uc.ID = "Child1_1";
Panel1.ContentControls.Add(uc);
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
var uc = LoadControl("ucViewServiceRequests.ascx");
uc.ID = "Child1_1";
Panel1.ContentControls.Add(uc);
Panel1.UpdateContent();
this.ViewState["recreate"] = true;
}
}
As you can see, I'm recreating the userControl on each request (using a ViewState flag to activate it only when the button is pressed).The userControl I'm trying to load contains a simple table grid with a DataStore. The DataStore has a PageProxy to allow remote loading of data.
Here is an excerpt of the markup file ucViewServiceRequests.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucViewServiceRequests.ascx.cs" Inherits="TestExtNet.ucViewServiceRequests" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:FitLayout ID="FitLayout1" runat="server">
<Items>
<ext:GridPanel ID="GridPanel1"
runat="server"
Frame="true">
<Store>
<ext:Store AutoLoad="false" ID="Store1" runat="server" RemoteSort="true" OnRefreshData="Store1_RefreshData">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="ReqID">
<Fields>
<ext:RecordField Name="ReqID" />
<ext:RecordField Name="Code" />
<ext:RecordField Name="ServiceType" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="30" Mode="Raw" />
<ext:Parameter Name="sort" Value="" />
<ext:Parameter Name="dir" Value="" />
</BaseParams>
<SortInfo Field="ReqID" Direction="ASC" />
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column DataIndex="ReqID" Header="ID" Width="50" />
<ext:Column DataIndex="Code" Header="Code" Width="150" />
<ext:Column DataIndex="ServiceType" Header="Service Type" Width="100" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="30" DisplayMsg="Total requests: <b>{2}</b>" />
</BottomBar>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:FitLayout>
In the code behind (of the userControl) I simply manage data retrieving from a database with the Store1_RefreshData server side function.Ok... it looks fine, elegant and clean.... but.. it doesn't work!...
I get a strange client-side error (e.g. javascript error: expected(;)) when the master page is loaded (maybe the problem is in the userControl creation..).
If I try to remove the <ext:PageProxy /> tag from the userControl markup (and temporarily delete the OnRefreshData attribute from the <Store> element) the page is correctly loaded, the grid layout and columns are correctly displayed (although stored data are not retrieved..)
I'm very interested in dynamically created usercontrols, instead of using IFRAMES..
What's wrong with my implementation?
Any suggestion?
Thank you in advance