Dynamically created UserControl with Store/PageProxy

Page 1 of 2 12 LastLast
  1. #1

    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:

        <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
  2. #2
    Hi,

    Welcome to Ext.NET and thanks for the excellent feedback!

    I think a user control is not recreated, because ViewState's flag is null. By default, ViewState is not send during DirectEvents.

    Please try with a flag in Session.

    I'm very interested in dynamically created usercontrols, instead of using IFRAMES..
    Good point!

    You might be interested to investigate this thread:
    http://forums.ext.net/showthread.php?16895
  3. #3
    Hi Daniil,
    thank you for your reply.

    Quote Originally Posted by Daniil View Post
    Please try with a flag in Session.
    I put the flag in the Session but.. unfortunately.. it doesn't work... :-(

    I think the problem is in the control rendering (as I obtain a client javascript error).

    With a static usercontrol put in the page markup everything is ok ant it correctly works!

    This works..
    <form id="form1" runat="server">
         <ext:ResourceManager ID="ResourceManager1" Mode="Script" runat="server"></ext:ResourceManager>
    
        <div>
            
            <ext:Panel ID="Panel1" runat="server" Height="300" Title="Title">
               <Content>
               <uc1:ucViewServiceRequests ID="ucViewServiceRequests1" runat="server" />
               </Content>
            </ext:Panel>
           
        </div>
             
    </form>
    When I remove the usercontrol and make it built at runtime with a button click, I get a client error (just after the page has been rendered after the serverside button-click handler function).

    The error I get is a JScript compilation error (" ; required") when the library tries to evaluate the initialization script.

    The error occurs at the "eval(result.script)" statement.
    Here is the content of result.script variable (taken from the debugger watcher). Do you notice something strange?...

    Ext.net.ResourceMgr.load([{url:"/extnet/extnet-data-debug-js/ext.axd?v=21945"}], function(){{store:this.Child1_1_Store1=new Ext.net.Store({proxyId:"Child1_1_Store1",autoLoad:true,proxy:new Ext.net.PageProxy({}),reader:new Ext.data.JsonReader({fields:[{name:"IdRichiesta"},{name:"CodiceRichiesta"},{name:"TipoServizio"}],idProperty:"IDRichiesta"}),remoteSort:true,sortInfo:{field:"IdRichiesta",direction:"asc"},directEventConfig:{},beforeLoadParams:function(store,options){if (!options.params){options.params = {};};Ext.apply(options.params,{});Ext.applyIf(options.params,{"start":0,"limit":30,"sort":"","dir":""});}}),id:"Child1_1_GridPanel1",xtype:"netgrid",autoWidth:true,height:700,bbar:{id:"Child1_1_PagingToolbar1",xtype:"paging",displayInfo:true,displayMsg:"Total requests: <b>{2}</b>",pageSize:30},frame:true,loadMask:{showMask:true},sm:this.Child1_1_RowSelectionModel1=new Ext.grid.RowSelectionModel({proxyId:"Child1_1_RowSelectionModel1"}),selectionSavingBuffer:10,memoryIDField:"IDRichiesta",cm:this.Child1_1_ColumnModel1=new Ext.grid.ColumnModel({proxyId:"Child1_1_ColumnModel1",columns:[{dataIndex:"IdRichiesta",header:"ID",width:50},{dataIndex:"CodiceRichiesta",header:"Code",width:150},{dataIndex:"TipoServizio",header:"Service"}]})}});
    Another issue.. very strange too...

    If a press the [Ignore] button in the debugger window the webPage is rendered to the client with an empty panel (of course..).
    BUT... when I press the Refresh button in the browser (in the same session)... IT WORKS !!!

    I'm getting lost... what's happening???

    THANKS!!!!
  4. #4
    I missed the fact that there is a FitLayout control at the top level in the user control.

    The UpdateContent doesn't work in this case.

    Please wrap the Panel1 in an additional <ext:Container>.

    Example
    <ext:Container 
        runat="server" 
        Height="300" 
        Width="500" 
        Layout="FitLayout">
        <Items>
            <ext:Panel ID="Panel1" runat="server" />
        </Items>
    </ext:Container>
    And call Render instead of UpdateContent.
    Panel1.Render();
  5. #5
    Quote Originally Posted by Daniil View Post
    Please wrap the Panel1 in an additional <ext:Container>
    YES!!!!!!!!!!!!!! Now it works perfectly!!!
    You solved my problem!, thank you very much...

    Please, as I'm new to this forum, tell me how to mark this thread as [CLOSED]...
  6. #6
    Glad to help.

    Quote Originally Posted by nino View Post
    Please, as I'm new to this forum, tell me how to mark this thread as [CLOSED]...
    We mark threads as closed only on the preimum help forums and we do it ourselves. So, don't worry:)
  7. #7
    Quote Originally Posted by Daniil View Post
    Glad to help.



    We mark threads as closed only on the preimum help forums and we do it ourselves. So, don't worry:)
    Well if you want to mess things litlle bit just add a button in usercontrols and call for example somethisng like #{GridView1}.save() or #{GridView1}.reload() //
    you will see that in dynamic scenario it won't load throwing exception about store controlid is not found.Ofcourse this can be fixed by recreating UserControl on every request . But what happens If you have multiple UserControls and you load them conditionally.The only solution I found is
    <Click Handler="#{grdCustomers}.reload( { params : { ctrl: '~/ctrl/WebUserControl1.ascx' } });" />
    and by validating "ctrl" value creating control accordingly
  8. #8
    Hi,

    I would use an HttpProxy in such case and refer, for example, a web service or a generic HTTP handler. It won't require recreating a Store.
  9. #9
    Quote Originally Posted by Daniil View Post
    Hi,

    I would use an HttpProxy in such case and refer, for example, a web service or a generic HTTP handler. It won't require recreating a Store.
    Well I have tried and in case of #{somegrid}.save() it will crush by posting parent.aspx and since no store defined there it crushes. #somegrid}.reload() works just fine when HttpProxy is defined . Anyways I found some workaround and I don't know if it is the best one. Is there any way to handle OnStoreBeforeChange on child.aspx in Merge Mode scenario.
    //this is the store
          <ext:Store runat="server" ID="storeIncidentNotification" AutoLoad="true">
                            <Proxy>
                                <ext:HttpProxy Json="true" Url="stores/data_stores.ashx" Method="GET">
                                </ext:HttpProxy>
                            </Proxy>
                            <AutoLoadParams>
                                <ext:Parameter Mode="Value" Name="methodName" Value="storeIncidentNotification">
                                </ext:Parameter>
                                <ext:Parameter Mode="Value" Name="eventId" Value="1">
                                </ext:Parameter>
                            </AutoLoadParams>
                            <BaseParams>
                                <ext:Parameter Mode="Value" Name="methodName" Value="storeIncidentNotification">
                                </ext:Parameter>
                                <ext:Parameter Mode="Raw" Name="eventId" Value="#{cboEvents}.getValue()">
                                </ext:Parameter>
                            </BaseParams>
    //this is button for saving
     <ext:Button runat="server" ID="btnSaveEmlCfg" Icon="Disk" Text="Save">
                            <Listeners>
                              <%--  <Click Handler = "#{grdNotifications}.save()" />--%> // this crushes
                            </Listeners>
                            <DirectEvents>
                                <Click OnEvent="saveGrid" Url="EmailOnIncidentsClose.aspx" Before="return beforeSaveEmlCfg();" // this checks for edited records 
                                    After="onAfterSave()"> //this just commit changes store.commitChanges();
                                    <ExtraParams>
                                        <ext:Parameter Mode="Raw" Name="Edited" Value="getModifRecords()"> // this gets modified record from store end encodes them
                                        </ext:Parameter>
                                    </ExtraParams>
                                    <EventMask CustomTarget="#{grdNotifications}" Msg="Saving..." ShowMask="true" />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
  10. #10
    Well, it should be possible if recreate the Store.

    But I would set up an UpdateProxy for saving.
Page 1 of 2 12 LastLast

Similar Threads

  1. TabPanel and Store with PageProxy?
    By dmoore in forum 1.x Help
    Replies: 4
    Last Post: Aug 25, 2011, 3:40 PM
  2. [CLOSED] Reload store created dynamically
    By stoque in forum 1.x Premium Help
    Replies: 5
    Last Post: Aug 18, 2011, 5:07 PM
  3. [CLOSED] Export dynamically created Grid/Store
    By CarWise in forum 1.x Premium Help
    Replies: 1
    Last Post: May 05, 2011, 12:40 PM
  4. [CLOSED] Combobox with store and pageproxy
    By John_Writers in forum 1.x Premium Help
    Replies: 1
    Last Post: Apr 15, 2011, 4:19 PM
  5. Multi Store PageProxy
    By andreydruz in forum 1.x Help
    Replies: 1
    Last Post: Jan 08, 2011, 12:28 PM

Posting Permissions