PDA

View Full Version : [CLOSED] Dynamic HTML rendering in a Panel



vijay.sahu
Apr 03, 2013, 9:45 AM
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.

Daniil
Apr 03, 2013, 10:51 AM
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>

vijay.sahu
Apr 03, 2013, 11:29 AM
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$ResourceManager1",aspForm:"form1",appName:"CAFMWeb",icons:["Pencil","Magnifier","Add","PageWhiteEdit","Delete","ApplicationFormMagnify","PencilAdd","Disk","Cancel"]});Ext.onReady(function(){Ext.create("Ext.window.Window",{id:"winAdd",autoRender:false,height:500,loader:{reloadOnEvent :true,autoLoad:false,loadMask:{showMask:true},rend erer:"frame"},width:570,collapsible:true,iconCls:"#Pencil",defaultRenderTo:"form",maximizable:true,modal:true});Ext.create("Ext.net.Viewport",{id:"cph1_Viewport1",bodyPadding:0,title:"",border:false,renderTo:Ext.get("form1"),items:[{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(item,e){Ext.net. directRequest({control:this});}}}},{id:"cph1_btnAdd",margin:"0 0 0 5",tooltips:[{id:"cph1_ToolTip7",xtype:"tooltip"}],iconCls:"#Add",directEvents:{click:{fn:function(item,e){Ext.net. directRequest({userSuccess:function(response,resul t,el,type,action,extraParams,o){App.cph1_FormPanel 1.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:function(item,e){Ext.net. directRequest({control:this});}}}},{id:"cph1_btnDelete",disabled:true,tooltips:[{id:"cph1_ToolTip9",xtype:"tooltip"}],iconCls:"#Delete",directEvents:{click:{fn:function(item,e){Ext.net. directRequest({userSuccess:function(response,resul t,el,type,action,extraParams,o){App.cph1_FormPanel 1.getForm().reset();},confirmation:{confirmRequest :true,title:"",message:""},control:this});}}}},{id:"cph1_Button2",tooltips:[{id:"cph1_ToolTip1",xtype:"tooltip"}],iconCls:"#ApplicationFormMagnify",listeners:{click:{fn:function(item,e){Ext.Msg.ale rt('Click','Click 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"},{name:"LanguageID"},{name:"LanguageName"},{name:"Status",type:"boolean"},{name:"CreatedDate",type:"date",dateFormat:"Y-m-d\\TH:i:s"},{name:"ModifiedDate",type:"date",dateFormat:"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:"center",flex:50,bbar:{id:"cph1_Pager1",xtype:"pagingtoolbar",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_LangauageName",flex:4,dataIndex:"LanguageName"},{id:"cph1_Status",flex:3,dataIndex:"Status",renderer:function(value,metadata,record,rowIndex, colIndex,store,view){return (value) ? 'Active':'InActive';}},{id:"cph1_CreatedDate",xtype:"datecolumn",flex:4,dataIndex:"CreatedDate",format:"m/d/Y"},{id:"cph1_ModifiedDate",xtype:"datecolumn",flex:4,dataIndex:"ModifiedDate",format:"m/d/Y"}]},selModel:window.App.cph1_RowSelectionModel1=Ext. create("Ext.selection.RowModel",{proxyId:"cph1_RowSelectionModel1",selType:"rowmodel"}),features:[window.App.cph1_GridFilters=Ext.create("Ext.ux.grid.FiltersFeature",{proxyId:"cph1_GridFilters",local:true,filters:[{dataIndex:"Name",type:"string"},{dataIndex:"Code",type:"string"},{dataIndex:"LangauageName",type:"string"},{dataIndex:"CreatedDate",type:"date",dateFormat:"n/j/Y",pickerOpts:{format:"n/j/Y",longDayFormat:"l, F d, Y",todayText:"Now"}},{dataIndex:"ModifiedDate",type:"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_cntBlank",xtype:"container",flex:10,items:[{id:"cph1_hdnCountryID",xtype:"hiddenfield",name:"CountryId"}]}],layout:"hbox",url:"/CAFMWeb/admin/CountryAddEdit.aspx",fieldDefaults:{msgTarget:"side"}}],layout:{type:"vbox",align:"stretch"}},{id:"cph1_wn1",autoRender:false,height:255,width:350,xtype:"window",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:"cph1_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,maxLength: 50,regex:/^(?=.*\S).+$/},{id:"cph1_lblActive",padding:5,xtype:"netlabel"},{id:"cph1_chkActive",padding:5,xtype:"checkboxfield",name:"Status",inputValue:"App.cph1_chkActive"},{id:"cph1_lblLanguage",padding:5,xtype:"netlabel"},{id:"cph1_cmbLanguage",padding:5,xtype:"selectbox",name:"Language",allowBlank:false,displayField:"Name",queryMode:"local",triggerAction:"all",valueField:"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){Ext.net. directRequest({before:function(el,type,action,extr aParams,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:"splitter"},{id:"cph1_btnCancel",xtype:"button",flex:2,handler:function(item,e){App.cph1_wn1.hide ();},iconCls:"#Cancel",directEvents:{click:{fn:function(item,e){Ext.net. directRequest({userSuccess:function(response,resul t,el,type,action,extraParams,o){App.cph1_FormPanel 2.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:"#PencilAdd",defaultRenderTo:"form",maximizable:true,modal: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>

Daniil
Apr 03, 2013, 1:57 PM
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/Component/Http_Handler/

vijay.sahu
Apr 04, 2013, 11:28 AM
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.

Daniil
Apr 04, 2013, 12:19 PM
Please post a sample directly here wrapping in code tags.

Just a page and a handler.

vijay.sahu
Apr 04, 2013, 1:14 PM
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");
}
}

Daniil
Apr 04, 2013, 3:55 PM
Sorry, too many code. Please simplify as much as you can following this technique.
How to prepare a sample (http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687)

vijay.sahu
Apr 05, 2013, 6:01 AM
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().getGridC olumns();

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;
}
}

}

Daniil
Apr 05, 2013, 10:53 AM
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/Component/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/#/Miscellaneous/Bin_HtmlBin/UserControl/

Hope this helps.

Daniil
Apr 05, 2013, 11:36 AM
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


Well, a server exception occurs. If you look at a response you will see:

<img src="../resources/images/404.png" width="72" height="72" alt="" />
as a piece of that.

So, I guess it can't find the ASHX handler or the ASCX control.

It doesn't cancel other my comments.