[CLOSED] Dynamic HTML rendering in a Panel

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Dynamic HTML rendering in a Panel

    Hi,

    I have a requirement of rendering the HTML of a page in a panel. I am getting the proper HTML when I do a getJson request but when I update this HTML string in a panel, I am getting the following error.

    'The state information is invalid for this page and might be corrupted.'

    Will you be able to provide some inputs on how to solve this issue.

    Note : I donot want to use of iframe to achieve this functionality.
    Last edited by Daniil; Apr 09, 2013 at 4:11 AM. Reason: [CLOSED]
  2. #2
    Hi @vijay.sahu,

    What is the HTML you want to put into a Panel?

    And, actually, how are you putting?

    You can use a Panel's Html property.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Update(object sender, DirectEventArgs e)
        {
            this.Panel1.Html = "New HTML";
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Panel 
                ID="Panel1" 
                runat="server" 
                Height="100" 
                Html="Initial HTML" />
    
            <ext:Button runat="server" Text="Update" OnDirectClick="Update" />
        </form>
    </body>
    </html>
  3. #3
    I have a link in my page, on click of which I will be calling the panels update method in javascript i.e. #{Panel1}.update(msg, true);

    I will get HTML string similar to the one below. Now when I update the panel, I am getting the above mentioned error.


    <!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>
    <link type="text/css" rel="stylesheet" href="/CAFMWeb/extjs/resources/css/ext-all-embedded-css/ext.axd?v=18167" id="ext-theme" />
    <link type="text/css" rel="stylesheet" href="/CAFMWeb/extnet/resources/css/extnet-all-embedded-css/ext.axd?v=18167" />
    <link type="text/css" rel="stylesheet" href="/CAFMWeb/ux/resources/gridfilters-embedded-css/ext.axd?v=18167" />
    <script type="text/javascript" src="/CAFMWeb/extjs/ext-all-js/ext.axd?v=18167"></script>
    <script type="text/javascript" src="/CAFMWeb/extnet/extnet-all-js/ext.axd?v=18167"></script>
    <script type="text/javascript" src="/CAFMWeb/ux/grid/gridfilters/gridfilters-js/ext.axd?v=18167"></script>
    <script type="text/javascript" src="/CAFMWeb/ux/selectbox/selectbox-js/ext.axd?v=18167"></script>

    <title></title>
    <link href="../resources/css/main.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/Common.js?t=7Mar2013" language="javascript" type="text/javascript"></script>
    <script src="../resources/js/jquery-1.8.1.min.js?t=7Mar2013" language="javascript"
    type="text/javascript"></script>


    <script type="text/javascript">
    //<![CDATA[
    Ext.net.ResourceMgr.init({id:"ctl00$ResourceManage r1",aspForm:"form1",appName:"CAFMWeb",icons:["Pencil","Magnifier","Add","PageWhiteEdit","Delete ","ApplicationFormMagnify","PencilAdd","Disk","Can cel"]});Ext.onReady(function(){Ext.create("Ext.window.W indow",{id:"winAdd",autoRender:false,height:500,lo ader:{reloadOnEvent:true,autoLoad:false,loadMask:{ showMask:true},renderer:"frame"},width:570,collaps ible:true,iconCls:"#Pencil",defaultRenderTo:"form" ,maximizable:true,modal:true});Ext.create("Ext.net .Viewport",{id:"cph1_Viewport1",bodyPadding:0,titl e:"",border:false,renderTo:Ext.get("form1"),item s:[{id:"cph1_Panel3",region:"center",flex:1,items:[{id:"cph1_topMenu",tbar:{id:"cph1_Toolbar1",border :false,xtype:"toolbar",items:[{id:"cph1_txtSearch",margin:"0 0 0 5",xtype:"textfield"},{id:"cph1_btnSearch",iconCls :"#Magnifier",directEvents:{click:{fn:function(ite m,e){Ext.net.directRequest({control:this});}}}},{i d:"cph1_btnAdd",margin:"0 0 0 5",tooltips:[{id:"cph1_ToolTip7",xtype:"tooltip"}],iconCls:"#Add",directEvents:{click:{fn:function(i tem,e){Ext.net.directRequest({userSuccess:function (response,result,el,type,action,extraParams,o){App .cph1_FormPanel1.getForm().reset();},control:this} );}}}},{id:"cph1_btnEdit",disabled:true,tooltips:[{id:"cph1_ToolTip8",xtype:"tooltip"}],handler:function(item,e){App.cph1_wn1.show();},ic onCls:"#PageWhiteEdit",directEvents:{click:{fn:fun ction(item,e){Ext.net.directRequest({control:this} );}}}},{id:"cph1_btnDelete",disabled:true,tooltips :[{id:"cph1_ToolTip9",xtype:"tooltip"}],iconCls:"#Delete",directEvents:{click:{fn:functio n(item,e){Ext.net.directRequest({userSuccess:funct ion(response,result,el,type,action,extraParams,o){ App.cph1_FormPanel1.getForm().reset();},confirmati on:{confirmRequest:true,title:"",message:""},contr ol:this});}}}},{id:"cph1_Button2",tooltips:[{id:"cph1_ToolTip1",xtype:"tooltip"}],iconCls:"#ApplicationFormMagnify",listeners:{clic k:{fn:function(item,e){Ext.Msg.alert('Click','Clic k on Delete');}}}}]}},{id:"cph1_FormPanel1",border:false,xtype:"form" ,items:[{store:{model:Ext.define("App.cph1_modelCountry", {extend: "Ext.data.Model", fields:[{name:"CountryId"},{name:"Name"},{name:"Code"},{na me:"LanguageID"},{name:"LanguageName"},{name:"Stat us",type:"boolean"},{name:"CreatedDate",type:"date ",dateFormat:"Y-m-d\\TH:i:s"},{name:"ModifiedDate",type:"date",dateF ormat:"Y-m-d\\TH:i:s"}] }),storeId:"cph1_StoreCountry",autoLoad:true,proxy :{type:"page"},pageSize:10},id:"cph1_grdCountries" ,margin:"5",minHeight:200,xtype:"grid",region:"cen ter",flex:50,bbar:{id:"cph1_Pager1",xtype:"pagingt oolbar",displayInfo:true,store:"cph1_StoreCountry" ,hideRefresh:true},columns:{id:"cph1_ColumnModel1" ,items:[{id:"cph1_Name",flex:4,dataIndex:"Name"},{id:"cph1 _Code",flex:4,dataIndex:"Code"},{id:"cph1_Langauag eName",flex:4,dataIndex:"LanguageName"},{id:"cph1_ Status",flex:3,dataIndex:"Status",renderer:functio n(value,metadata,record,rowIndex,colIndex,store,vi ew){return (value) ? 'Active':'InActive';}},{id:"cph1_CreatedDate",xtyp e:"datecolumn",flex:4,dataIndex:"CreatedDate",form at:"m/d/Y"},{id:"cph1_ModifiedDate",xtype:"datecolumn",fle x:4,dataIndex:"ModifiedDate",format:"m/d/Y"}]},selModel:window.App.cph1_RowSelectionModel1=Ext. create("Ext.selection.RowModel",{proxyId:"cph1_Row SelectionModel1",selType:"rowmodel"}),features:[window.App.cph1_GridFilters=Ext.create("Ext.ux.gri d.FiltersFeature",{proxyId:"cph1_GridFilters",loca l:true,filters:[{dataIndex:"Name",type:"string"},{dataIndex:"Code" ,type:"string"},{dataIndex:"LangauageName",type:"s tring"},{dataIndex:"CreatedDate",type:"date",dateF ormat:"n/j/Y",pickerOpts:{format:"n/j/Y",longDayFormat:"l, F d, Y",todayText:"Now"}},{dataIndex:"ModifiedDate",typ e:"date",dateFormat:"n/j/Y",pickerOpts:{format:"n/j/Y",longDayFormat:"l, F d, Y",todayText:"Now"}}]})],listeners:{selectionchange:{fn:function(item,sele cted){if (selected[0]) { App.cph1_FormPanel1.getForm().loadRecord(selected[0]); App.cph1_btnEdit.enable(); App.cph1_btnDelete.enable();}}}}},{id:"cph1_cntBla nk",xtype:"container",flex:10,items:[{id:"cph1_hdnCountryID",xtype:"hiddenfield",name:" CountryId"}]}],layout:"hbox",url:"/CAFMWeb/admin/CountryAddEdit.aspx",fieldDefaults:{msgTarget:"sid e"}}],layout:{type:"vbox",align:"stretch"}},{id:"cph1_w n1",autoRender:false,height:255,width:350,xtype:"w indow",items:[{id:"cph1_FormPanel2",xtype:"form",items:[{id:"cph1_FieldSet1",buttonAlign:"Right",margin:"5 ",minHeight:200,xtype:"fieldset",flex:40,contentEl :"cph1_FieldSet1_Content",items:[{id:"cph1_myid",xtype:"container",colspan:2},{id:" cph1_lblName",padding:5,xtype:"netlabel"},{id:"cph 1_txtName",padding:5,xtype:"textfield",name:"Name" ,allowBlank:false,enforceMaxLength:true,maxLength: 50,regex:/^(?=.*\S).+$/},{id:"cph1_lblCode",padding:5,xtype:"netlabel"},{ id:"cph1_txtCode",padding:5,xtype:"textfield",name :"Code",allowBlank:false,enforceMaxLength:true,max Length:50,regex:/^(?=.*\S).+$/},{id:"cph1_lblActive",padding:5,xtype:"netlabel"} ,{id:"cph1_chkActive",padding:5,xtype:"checkboxfie ld",name:"Status",inputValue:"App.cph1_chkActive"} ,{id:"cph1_lblLanguage",padding:5,xtype:"netlabel" },{id:"cph1_cmbLanguage",padding:5,xtype:"selectbo x",name:"Language",allowBlank:false,displayField:" Name",queryMode:"local",triggerAction:"all",valueF ield:"LanguageID",store:[[2,"Norwey"],[4,"Hindi"],[8,"English"],[13,"French"],[15,"British"]]},{id:"cph1_lblBlank",xtype:"netlabel"},{id:"cph1_ pnlSaveCancel",border:false,colspan:1,items:[{id:"cph1_btnSave",xtype:"button",flex:2,iconCls:" #Disk",directEvents:{click:{fn:function(item,e){Ex t.net.directRequest({before:function(el,type,actio n,extraParams,o){return App.cph1_FormPanel2.getForm().isValid();},userSucc ess:function(response,result,el,type,action,extraP arams,o){App.cph1_FormPanel2.getForm().reset();},c ontrol:this});}}}},{id:"cph1_spliter",xtype:"split ter"},{id:"cph1_btnCancel",xtype:"button",flex:2,h andler:function(item,e){App.cph1_wn1.hide();},icon Cls:"#Cancel",directEvents:{click:{fn:function(ite m,e){Ext.net.directRequest({userSuccess:function(r esponse,result,el,type,action,extraParams,o){App.c ph1_FormPanel2.getForm().reset();},control:this}); }}}}],layout:{type:"hbox"}}],layout:{type:"table",columns:2}}],url:"/CAFMWeb/admin/CountryAddEdit.aspx"}],bodyStyle:"background-color: #fff;",bodyPadding:5,collapsible:true,iconCls:"#Pe ncilAdd",defaultRenderTo:"form",maximizable:true,m odal:true}],layout:"border"});});
    //]]>
    </script>
    </head>
    <body>
    <form method="post" action="CountryAddEdit.aspx" id="form1">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTI3NzY0MzMzNQ9kFgJmD2QWAgIDD2QWBAIDDw8WDB4 ESWNvbgspXEV4dC5OZXQuSWNvbiwgRXh0Lk5ldCwgVmVyc2lvb j0yLjEuMS4xODE2NywgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWN LZXlUb2tlbj0yZTEyY2UzZDAxNzZjZDg34AkeBU1vZGFsZx4KQ XV0b1JlbmRlcmgeC0NvbGxhcHNpYmxlZx4LTWF4aW1pemFibGV nHgZIaWRkZW5nZGQCBQ9kFgICAQ9kFgICAQ9kFgRmD2QWAgIBD 2QWAmYPZBYCZg8PFgIeDUlzUGFnaW5nU3RvcmVnZGQCAQ9kFgJ mD2QWAmYPZBYCAgsPFgIeBWNsYXNzBQh4LWhpZGRlbmQYAQUeX 19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFhsFFmN0bDA wJFJlc291cmNlTWFuYWdlcjEFDGN0bDAwJHdpbkFkZAURY3RsM DAkY3BoMSRQYW5lbDMFEmN0bDAwJGNwaDEkdG9wTWVudQUUY3R sMDAkY3BoMSR0eHRTZWFyY2gFFGN0bDAwJGNwaDEkYnRuU2Vhc mNoBRFjdGwwMCRjcGgxJGJ0bkFkZAUTY3RsMDAkY3BoMSRUb29 sVGlwNwUSY3RsMDAkY3BoMSRidG5FZGl0BRNjdGwwMCRjcGgxJ FRvb2xUaXA4BRRjdGwwMCRjcGgxJGJ0bkRlbGV0ZQUTY3RsMDA kY3BoMSRUb29sVGlwOQUSY3RsMDAkY3BoMSRCdXR0b24yBRNjd GwwMCRjcGgxJFRvb2xUaXAxBRVjdGwwMCRjcGgxJEZvcm1QYW5 lbDEFF2N0bDAwJGNwaDEkZ3JkQ291bnRyaWVzBR1jdGwwMCRjc GgxJFJvd1NlbGVjdGlvbk1vZGVsMQUXY3RsMDAkY3BoMSRoZG5 Db3VudHJ5SUQFDmN0bDAwJGNwaDEkd24xBRVjdGwwMCRjcGgxJ EZvcm1QYW5lbDIFEmN0bDAwJGNwaDEkdHh0TmFtZQUSY3RsMDA kY3BoMSR0eHRDb2RlBRRjdGwwMCRjcGgxJGNoa0FjdGl2ZQUWY 3RsMDAkY3BoMSRjbWJMYW5ndWFnZQUYY3RsMDAkY3BoMSRwbmx TYXZlQ2FuY2VsBRJjdGwwMCRjcGgxJGJ0blNhdmUFFGN0bDAwJ GNwaDEkYnRuQ2FuY2Vs8cE2W6Q02Cy4bsqHbxX5mZJr0iFG8W8 vLmrwiy3HK6g=" />

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLB79+dCgLY0voM4d0Km8uz22sbmN0jGns9x1/65FH5AZBqLhIDf+S2xaM=" />
    <div>

    </div>

    <div id="dvData">

    <div id="cph1_FieldSet1_Content" class="x-hidden">
    </div>

    </div>
    </form>
    </body>
    </html>
  4. #4
    Your HTML contains a whole page. It can be applied to an iframe only.

    Do you need to load Ext.NET controls dynamically? If yes, please use a Loader.
    http://examples2.ext.net/#/Loaders/C.../Http_Handler/
  5. #5
    Thanks for the reply Daniil.

    I tried to implement the code mentioned in the link but unfortunately I am unable to get success in it. I dont know why but when I click the link, the panel section hangs up and only the LoadMask is getting displayed.

    I have uploaded the sample code which I tried in the following link :http://122.169.102.111/CaFM/samplesite.zip

    Please try to run the Handler.aspx page. You'll get two links 'HttpHandler' and 'Json'. On clicking both the links, the control won't be loaded and only loading mask will be displayed.

    It would be a great help if you can let me know how can I load the controls in the respective panels.
  6. #6
    Please post a sample directly here wrapping in code tags.

    Just a page and a handler.
  7. #7
    Code for page.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">
        <title></title>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            function LoadPanel(panel) {
                panel.load();
            }
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="pnlHdr" runat="server" Region="North" Border="False" Layout="BorderLayout"
            Height="101" BodyPadding="0">
            <Items>
                <ext:Label Region="North" runat="server" ID="lblLog">
                    <Content>
                        <div id="titlebar" style="padding: 10px 0px 0px 10px;">
                            <p class="title">
                                Protector</p>
                        </div>
                    </Content>
                </ext:Label>
            </Items>
        </ext:Panel>
        <ext:Panel ID="pnlLeftTreeNav" runat="server" Region="West" Width="250" MinWidth="250">
            <LayoutConfig>
                <ext:HBoxLayoutConfig Animate="true" ShrinkToFit="true">
                </ext:HBoxLayoutConfig>
            </LayoutConfig>
            <Items>
                <ext:LinkButton ID="lbtnHttpHandler" runat="server" Text="HttpHandler">
                    <Listeners>
                        <Click Handler="LoadPanel(#{pnlHandler})" />
                    </Listeners>
                </ext:LinkButton>
                <ext:BoxSplitter runat="server">
                </ext:BoxSplitter>
                <ext:LinkButton ID="lbtnJson" runat="server" Text="Json">
                    <Listeners>
                        <Click Handler="LoadPanel(#{pnlJson})" />
                    </Listeners>
                </ext:LinkButton>
            </Items>
        </ext:Panel>
        <ext:Panel ID="pnlCenter" runat="server" Border="False" AutoScroll="true" Region="Center">
            <Items>
                <ext:Container runat="server" ID="ContnerCenter" Height="450" Width="800">
                    <Content>
                        <div id="dvCenter">
                            <ext:Panel ID="pnlHandler" runat="server" Height="200" Width="500" Layout="FitLayout"
                                Title="Load UserControl from Http Handler (manual loading)">
                                <Loader ID="Loader2" runat="server" AutoLoad="false" Url="~/Handler/CustomHandler.ashx?mode=uc"
                                    Mode="Component">
                                    <LoadMask ShowMask="true" />
                                </Loader>
                            </ext:Panel>
                            ==============================================================
                            <ext:Panel ID="pnlJson" runat="server" Height="200" Width="500" Layout="FitLayout"
                                Title="Load user control from JSON WebService (manual loading)">
                                <Loader ID="Loader1" runat="server" AutoLoad="false" Url="~/Service/ComponentService.asmx/UserControl"
                                    Mode="Component">
                                    <AjaxOptions Json="true" />
                                    <LoadMask ShowMask="true" />
                                </Loader>
                            </ext:Panel>
                        </div>
                    </Content>
                </ext:Container>
            </Items>
        </ext:Panel>
        <ext:Panel ID="pnlFooter" runat="server" Region="South" Border="False" Layout="BorderLayout"
            Height="101" BodyPadding="0">
            <Items>
                <ext:Label Region="North" runat="server" ID="Label1">
                    <Content>
                        <div id="Div1" style="padding: 10px 0px 0px 10px;">
                            <p class="title">
                                Footer</p>
                        </div>
                    </Content>
                </ext:Label>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>

    Code of UserControl

    .ascx file
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucDocumentUpload.ascx.cs"
        Inherits="Usercontrol_ucDocumentUpload" %>
    <script type="text/javascript">
        var i = 1;
        var fileUploadId = "FileUploadField";
        var childContainerId = "childContainer";
        function AddMore(parentContainer) {
    
            var childContainer = new Ext.Container({
                id: childContainerId + ++i,
                layout: {
                    type: 'hbox'
                },
                colspan: 2
            });
    
            childContainer.add({
                id: fileUploadId + i,
                xtype: "fileuploadfield",
                //flex: 50,
                emptyText: 'Upload a file'
                //icon: "attach"
            });
            childContainer.add(
            {
                id: "btnRemove_" + i,
                xtype: 'button',
                //cls: 'x-btn-icon icon-delete',
                cls: 'x-btn-icon',
                text: 'Remove',
                listeners: {
                    click: {
                        //element: 'el', //bind to the underlying el property on the panel
                        fn: function () { RemoveMore(this.id, parentContainer); }
                    }
                },
                margin: "0 0 0 10"
            });
            //childContainer.doLayout();
    
            parentContainer.add(childContainer);
            parentContainer.doLayout();
        }
    
        function RemoveMore(btnId, container) {
            var id = btnId.split("_");
            if (id.length == 2) {
                //var btn = Ext.ComponentQuery.query('button[id=' + btnId + ']');
    
                RemoveMoreButton(container, id[1]);
            }
        }
    
        function RemoveAll(container) {
            for (var j = i; j > 1; j--) {
                RemoveMoreButton(container, j);
            }
        }
    
        function RemoveMoreButton(container, id) {
            var childContainer = Ext.ComponentQuery.query('container[id=' + childContainerId + id + ']');
    
            if (childContainer) {
                container.remove(childContainer[0], true);
                container.doLayout();
            }
        }
    
        function DeleteDocument(grdCustomer, documentId, directMeth) {
            if (documentId != 0) {
                Ext.Msg.confirm('Confirm', 'Are you sure you want to delete?', function (btn, text) {
                    if (btn == 'yes') {
                        directMeth.DeleteDocument(documentId, {
                            success: function (result) {
                                grdCustomer.getSelectionModel().deselectAll();
                                grdCustomer.store.load();
                                Ext.Msg.alert('Deleted successfully.');
                            },
                            failure: function (errorMsg) {
                                Ext.Msg.alert('Unable to delete', errorMsg);
                            }
                        });
                    }
                    return false;
                })
            }
            else {
                Ext.MessageBox.show({
                    title: 'Action',
                    msg: 'Please select a record to delete.',
                    buttons: Ext.MessageBox.OK
                });
                return false;
            }
        }
    
        function OpenDocument(docId, element) {
            var dirPath = "upload path";
            dirPath = dirPath.replace("~/", "");
            var url = dirPath + "/12/11/" + docId + "_" + element.title;
            window.open(url);
        }
    </script>
    <ext:Container ID="Container2" runat="server" Layout="VBoxLayout" LabelAlign="Top"
        OverflowY="Scroll">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch">
            </ext:VBoxLayoutConfig>
        </LayoutConfig>
        <Items>
            <ext:GridPanel ID="grdDocument" Region="Center" runat="server" Title='Upload Document'
                Header="true">
                <Store>
                    <ext:Store ID="StoreDocument" runat="server" PageSize="10" OnReadData="StoreDocument_ReadData">
                        <Model>
                            <ext:Model ID="CustomerModel" runat="server" IDProperty="DocId">
                                <Fields>
                                    <ext:ModelField Name="DocId" />
                                    <ext:ModelField Name="Name" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Proxy>
                            <ext:PageProxy>
                            </ext:PageProxy>
                        </Proxy>
                    </ext:Store>
                </Store>
                <ColumnModel ID="CustomerColumnModel" runat="server">
                    <Columns>
                        <ext:TemplateColumn ID="TemplateColumn1" runat="server" Text='Document Name'
                            Flex="15" DataIndex="Name" TemplateString='<a href="#" title="{Name}" onclick="javascript:OpenDocument({DocId},this);return false;">{Name}</a>'>
                        </ext:TemplateColumn>
                        <ext:CommandColumn ID="CommandColumn1" runat="server" Width="60" Text="Delete">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete">
                                    <ToolTip Text="Delete" />
                                </ext:GridCommand>
                            </Commands>
                            <Listeners>
                                <Command Handler="DeleteDocument(#{grdDocument},record.data.DocId,#{DirectMethods});" />
                            </Listeners>
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                <Features>
                    <ext:GridFilters ID="GridFilters1" runat="server" Local="true">
                        <Filters>
                            <ext:StringFilter DataIndex="Name" />
                        </Filters>
                    </ext:GridFilters>
                </Features>
                <BottomBar>
                    <ext:PagingToolbar ID="Pager1" HideRefresh="true" runat="server" />
                </BottomBar>
            </ext:GridPanel>
            <ext:FieldSet runat="server" ID="fldsetAddUpload" Layout="TableLayout" Title="Upload File(s)"
                Padding="10" MarginSpec="10 0 0 0">
                <LayoutConfig>
                    <ext:TableLayoutConfig Columns="3" ItemCls="tblspacing">
                        <TableAttrs>
                            <CustomConfig>
                                <ext:ConfigItem Mode="Value" Name="Cellpadding" Value="4">
                                </ext:ConfigItem>
                                <ext:ConfigItem Mode="Value" Name="Width" Value="450">
                                </ext:ConfigItem>
                            </CustomConfig>
                        </TableAttrs>
                        <TDAttrs>
                            <CustomConfig>
                                <ext:ConfigItem Mode="Value" Name="Valign" Value="Top">
                                </ext:ConfigItem>
                            </CustomConfig>
                        </TDAttrs>
                    </ext:TableLayoutConfig>
                </LayoutConfig>
                <Content>
                    <ext:Container ColSpan="1" runat="server" ID="FileUploadContainer" Layout="VBoxLayout">
                        <Items>
                            <ext:Container ColSpan="2" runat="server" ID="childContainer1" Layout="HBoxLayout">
                                <Items>
                                    <ext:FileUploadField ID="FileUploadField1" runat="server" EmptyText="Upload a file">
                                    </ext:FileUploadField>
                                </Items>
                            </ext:Container>
                        </Items>
                    </ext:Container>
                    <ext:Button ID="btnAddMore" runat="server" Text="Add More" Icon="Add">
                        <Listeners>
                            <Click Handler="AddMore(#{FileUploadContainer});">
                            </Click>
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="btnUpload" runat="server" Text="Upload" Icon="ArrowIn">
                        <DirectEvents>
                            <Click IsUpload="true" OnEvent="btnUpload_Click" Success="RemoveAll(#{FileUploadContainer});">
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                </Content>
            </ext:FieldSet>
        </Items>
    </ext:Container>
    .ascx.cs file
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    using System.IO;
    using System.Diagnostics;
    
    public partial class Usercontrol_ucDocumentUpload : System.Web.UI.UserControl
    {
        #region - Constants -
        public const int FILEUPLOADWIDTH = 350;
        #endregion
    
        #region - Variables -
    
        public enum DocumentEntityEnum
        {
            Customer = 1,
            Supplier = 2
        }
    
        #endregion
    
        #region - Properties -
    
        public string DIRECTORYUPLOADPATH
        {
            get
            {
                return "~/AllResources/Document/12/12/";
            }
        }
    
        #endregion
    
        #region - Events -
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Container2.MaxHeight = 400;
            }
    
        }
    
        protected void btnUpload_Click(object sender, DirectEventArgs e)
        {
            //string FileName = "", error = "";
            try
            {
                string errMsg = UploadDocument();
    
                if (string.IsNullOrEmpty(errMsg))
                {
                    errMsg = "Document uploaded successfully.";
                    grdDocument.GetStore().Reload();
                }
    
                Ext.Net.X.Msg.Show(new MessageBoxConfig
                {
                    Title = "Action",
                    Message = errMsg,
                    Buttons = MessageBox.Button.OK,
                    Icon = MessageBox.Icon.INFO,
                });
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex.Message);
                throw ex;
            }
        }
    
        protected void StoreDocument_ReadData(object sender, StoreReadDataEventArgs e)
        {
            StoreDocument.DataSource = new object[]
                {
                    new object[] { 1, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 2, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 3, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 4, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 5, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 6, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 7, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 8, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 9, 9, "Text 9", DateTime.Now.Date }
                };
            StoreDocument.DataBind();
        }
    
        #endregion
    
        #region - Methods -
    
        private string UploadDocument()
        {
            string msg = string.Empty;
            try
            {
                // Get the HttpFileCollection
                HttpFileCollection hfc = Request.Files;
                string directoryPath = Server.MapPath(DIRECTORYUPLOADPATH);
                if (!Directory.Exists(directoryPath))
                {
                    Directory.CreateDirectory(directoryPath);
                }
    
                for (int i = 0; i < hfc.Count; i++)
                {
                    HttpPostedFile hpf = hfc[i];
                    if (hpf.ContentLength > 0)
                    {
                        //if (hpf.ContentLength < 307200)
                        //{
                        string Ext = System.IO.Path.GetExtension(hpf.FileName);
                        if ((Ext == ".txt") || (Ext == ".doc") || (Ext == ".docx") || (Ext == ".xls") || (Ext == ".xlsx") || (Ext == ".pdf"))
                        {
                            string fileName = directoryPath + "doc_" + DateTime.Now.ToString("dd_MM_yyyy__hh_mm_ss_fff");
                            hpf.SaveAs(fileName);
                        }
                    }
                }
            }
            catch (Exception ex)
            {
                msg = ex.Message;
            }
            return msg;
        }
    
        #endregion
    
        #region - Direct Methods -
    
        [DirectMethod]
        public void DeleteDocument(long documentId)
        {
            string directoryPath = Server.MapPath(DIRECTORYUPLOADPATH);
            string fileName = directoryPath + "doc_" + DateTime.Now.ToString("dd_MM_yyyy__hh_mm_ss_fff");
            if (File.Exists(fileName))
            {
                File.Delete(fileName);
            }
    
            //grdDocument.GetStore().Reload();
    
            //msg = General.getKeyValue("msgDeleteSuccess");
    
            //General.ShowMessageBox(msg);
        }
    
        #endregion
    }
    Code of Handler

    <%@ WebHandler Language="C#" Class="CustomHandler" %>
    
    using System;
    using System.Web;
    using Ext.Net;
    using System.Collections.Generic;
    
    public class CustomHandler : IHttpHandler
    {
    
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
    
            switch (context.Request["mode"])
            {
                case "uc":
                    ComponentLoader.Render("~/UserControls/ucDocumentUpload.ascx");
                    break;
    
                case "items":
                default:
                    ComponentLoader.Render(new List<AbstractComponent>()
                            { 
                                new Panel { Title="Item 1", Icon = Icon.UserBrown },
                                new Panel { Title="Item 2", Icon = Icon.UserGray },
                                new Panel { Title="Item 3", Icon = Icon.UserGreen }
                            }
                    );
                    break;
            }
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    
    }
    Code of Service
    <%@ WebService Language="C#" Class="ComponentService" %>
    
    using System.Web.Services;
    using Ext.Net;
    using System.Collections.Generic;
    
    /// <summary>
    /// 
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class ComponentService : System.Web.Services.WebService
    {
        [WebMethod]
        public void Items()
        {
            ComponentLoader.Render(new List<AbstractComponent>()
                    { 
                        new Panel{Title="Item 1", Icon = Icon.UserBrown},
                        new Panel{Title="Item 2", Icon = Icon.UserGray},
                        new Panel{Title="Item 3", Icon = Icon.UserGreen}
                    }
            );
        }
    
        [WebMethod]
        public string UserControl()
        {
            return ComponentLoader.ToConfig("~/UserControls/ucDocumentUpload.ascx");
        }
    }
  8. #8
    Sorry, too many code. Please simplify as much as you can following this technique.
    How to prepare a sample
  9. #9
    The control works perfectly fine if I register it on the page. You can check the following link for the output.
    http://122.169.102.111/CaFM/Sample/default.aspx

    But when I call the control through the loader, only the loadmask is displayed. You can check the following link for the output.
    http://122.169.102.111/CaFM/Sample/sample.aspx


    Simplified Code :

    Sample.aspx (Page)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %>
    <!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></title>
        <script type="text/javascript">
            function LoadPanel(panel) {
                panel.load();
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Panel ID="pnlLeftTreeNav" runat="server" Region="West" Width="250" MinWidth="250">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Animate="true" ShrinkToFit="true">
                    </ext:HBoxLayoutConfig>
                </LayoutConfig>
                <Items>
                    <ext:LinkButton ID="lbtnHttpHandler" runat="server" Text="Load Panel">
                        <Listeners>
                            <Click Handler="LoadPanel(#{pnlHandler})" />
                        </Listeners>
                    </ext:LinkButton>
                </Items>
            </ext:Panel>
            <ext:Panel ID="pnlCenter" runat="server" Border="False" AutoScroll="true" Region="Center">
                <Items>
                    <ext:Container runat="server" ID="ContnerCenter" Height="450" Width="800">
                        <Content>
                            <div id="dvCenter">
                                <ext:Panel ID="pnlHandler" runat="server" Height="200" Width="500" Layout="FitLayout"
                                    Title="Load UserControl from Http Handler (manual loading)">
                                    <Loader ID="Loader2" runat="server" AutoLoad="false" Url="~/Handler/CustomHandler.ashx?mode=uc"
                                        Mode="Component">
                                        <LoadMask ShowMask="true" />
                                    </Loader>
                                </ext:Panel>
                            </div>
                        </Content>
                    </ext:Container>
                </Items>
            </ext:Panel>
        </div>
        </form>
    </body>
    </html>
    Sample.ascx (Control)

    <%@ Control Language="C#" AutoEventWireup="true" %>
    <script type="text/javascript">
        var pinEditors = function (btn, pressed) {
            var columnConfig = btn.column,
                    record = columnConfig.record,
                    columns = columnConfig.grid.getView().getHeaderCt().getGridColumns();
    
            Ext.each(columns, function (column) {
                if (column != this && column.showComponent) {
                    column[pressed ? "showComponent" : "hideComponent"](record);
                }
            }, this);
        };
    </script>
    <script runat="server">
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] { 1, 1, "Text 1", DateTime.Now.Date },
                    new object[] { 2, 2, "Text 2", DateTime.Now.Date },
                    new object[] { 3, 3, "Text 3", DateTime.Now.Date },
                    new object[] { 4, 4, "Text 4", DateTime.Now.Date },
                    new object[] { 5, 5, "Text 5", DateTime.Now.Date },
                    new object[] { 6, 6, "Text 6", DateTime.Now.Date },
                    new object[] { 7, 7, "Text 7", DateTime.Now.Date },
                    new object[] { 8, 8, "Text 8", DateTime.Now.Date },
                    new object[] { 9, 9, "Text 9", DateTime.Now.Date }
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    <ext:GridPanel ID="GridPanel1" runat="server" Title="ComponentColumn Pin Editor">
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="IntField" Type="Int" />
                            <ext:ModelField Name="ComboField" Type="Int" />
                            <ext:ModelField Name="TextField" Type="String" />
                            <ext:ModelField Name="DateField" Type="Date" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:ComponentColumn ID="ComponentColumn1" runat="server" Editor="true" OverOnly="true"
                    DataIndex="IntField" Pin="true" Flex="1" Text="Integer">
                    <Component>
                        <ext:NumberField ID="NumberField1" runat="server" />
                    </Component>
                </ext:ComponentColumn>
                <ext:ComponentColumn ID="ComponentColumn2" runat="server" Editor="true" OverOnly="true"
                    DataIndex="ComboField" Pin="true" Flex="1" Text="ComboBox">
                    <Component>
                        <ext:ComboBox ID="ComboBox1" runat="server">
                            <Items>
                                <ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
                                <ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
                                <ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
                                <ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
                                <ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
                                <ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
                                <ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
                                <ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
                                <ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
                            </Items>
                        </ext:ComboBox>
                    </Component>
                </ext:ComponentColumn>
                <ext:ComponentColumn ID="ComponentColumn3" runat="server" Editor="true" OverOnly="true"
                    DataIndex="TextField" Pin="true" Flex="1" Text="Text">
                    <Component>
                        <ext:TextField ID="TextField1" runat="server" />
                    </Component>
                </ext:ComponentColumn>
                <ext:ComponentColumn ID="ComponentColumn4" runat="server" Editor="true" OverOnly="true"
                    DataIndex="DateField" Pin="true" Flex="1" Text="Date">
                    <Renderer Format="Date" FormatArgs="'d/m/Y'" />
                    <Component>
                        <ext:DateField ID="DateField1" runat="server" Format="dd/MM/yyyy" />
                    </Component>
                </ext:ComponentColumn>
                <ext:ComponentColumn ID="ComponentColumn5" runat="server" Width="25" PinAllColumns="false"
                    AutoWidthComponent="false">
                    <Component>
                        <ext:Button ID="Button1" runat="server" ToolTip="Pin editors" Icon="Pencil" AllowDepress="true"
                            EnableToggle="true">
                            <Listeners>
                                <Toggle Fn="pinEditors" />
                            </Listeners>
                        </ext:Button>
                    </Component>
                </ext:ComponentColumn>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    CustomHandler.ashx (Handler)

    <%@ WebHandler Language="C#" Class="CustomHandler" %>
    
    using System;
    using System.Web;
    using Ext.Net;
    using System.Collections.Generic;
    
    public class CustomHandler : IHttpHandler
    {
    
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
    
            switch (context.Request["mode"])
            {
                case "uc":
                    ComponentLoader.Render("~/UserControls/Sample.ascx");
                    break;
    
                case "items":
                default:
                    ComponentLoader.Render(new List<AbstractComponent>()
                            { 
                                new Panel { Title="Item 1", Icon = Icon.UserBrown },
                                new Panel { Title="Item 2", Icon = Icon.UserGray },
                                new Panel { Title="Item 3", Icon = Icon.UserGreen }
                            }
                    );
                    break;
            }
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    
    }
  10. #10
    Thank you for simplifying.

    Your code renders the GridPanel for me. Does it not for you? What is the response of a load request?

    It renders the empty GridPanel, because ComponentLoader.Render() doesn't execute a control's life cycle. So, its Page_Load is not executed.

    To bind the data to the GridPanel you should implement the IDynamicUserControl interace, see DynamicItems.ascx.
    http://examples2.ext.net/#/Loaders/C...Direct_Method/

    So, the IDynamicUserControl interface expects the BeforeRender method. Inside this method you can bind the data to the GridPanel.

    Another problem is JavaScript. It is not rendered as well. You should place the <script> tag into the GridPanel's HtmlBin. Here is an example of using the HtmlBin feature.
    http://examples2.ext.net/#/Miscellan...n/UserControl/

    Hope this helps.
Page 1 of 2 12 LastLast

Similar Threads

  1. MVC Controls - HTML rendering
    By Chetan in forum 2.x Help
    Replies: 2
    Last Post: Nov 30, 2012, 10:52 AM
  2. Replies: 1
    Last Post: May 29, 2012, 8:08 PM
  3. Replies: 1
    Last Post: Apr 11, 2012, 4:24 PM
  4. Replies: 12
    Last Post: Jul 26, 2011, 8:26 AM
  5. Replies: 1
    Last Post: May 28, 2010, 1:13 PM

Tags for this Thread

Posting Permissions