RCM
Mar 09, 2012, 7:44 PM
Using the tab sample in the example page of v2 shown below
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var addTab = function (tabPanel, id, url, menuItem) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : url,
closable : true,
menuItem : menuItem,
loader : {
url : url,
rendererType : "iframe",
loadMask : {
showMask : true,
msg : "Loading " + url + "..."
}
}
});
tab.on("activate", function (tab) {
#{MenuPanel1}.setSelection(tab.menuItem);
});
}
tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window ID="Window1"
runat="server"
Title="Adding tab"
Width="700"
Height="500"
Icon="Link"
Layout="BorderLayout">
<Items>
<ext:MenuPanel
ID="MenuPanel1"
runat="server"
Width="200"
Region="West">
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', ' /Administration/Administration/', this);" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
</Items>
</ext:Window>
</form>
</body>
</html>
the url " /Administration/Administration/'" contains the a dataview defined as shown below
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<div style="clear: both;">
</div>
<ext:Panel runat="server" Cls="items-view" Layout="fit" AutoHeight="true"
Border="false" ID="Thepanel" IDMode="Static">
<Items>
<ext:DataView runat="server" SingleSelect="true" OverClass="x-view-over" ItemSelector="div.items-ct"
AutoHeight="true" >
<Store>
<ext:Store runat="server" AutoLoad="true">
<Proxy>
<ext:AjaxProxy Url='<%# Html.GetUrl("Administration","Administration", "GetAdministratorMenu") %>' AutoDataBind="true">
<Reader>
<ext:JsonReader Root="">
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="Id" >
<Fields>
<ext:ModelField Name="Title" />
<ext:ModelField Name="Items" IsComplex="true" />
</Fields>
</ext:Model>
</Model>
<Listeners>
</Listeners>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<div class="items-ct">
<tpl for=".">
<div>
<table style="width:95%; margin:25px 0px 0px 0px">
<tpl for="Items">
<tpl if="this.isOdd(xindex)">
<tr>
<td width="50%">
<div class="item-wrap" url="{Url}" isPopUp={IsPopUp} >
<div style='padding: 0 5px 5px 5px; float:left;'><img src='{Icon}' ext:qtip='{Title}'/> </div>
<div class="title">
{Title:htmlDecode}<br/>
</div>
<div style='padding: 0 5px 5px 5px; word-wrap: break-word;' class="description">
{Description:htmlDecode}
</div>
</div>
</td>
</tpl>
<tpl if="this.isOdd(xindex) && xcount == xindex">
<td width="50%">
<span class="title"> </span>
</td>
</tr>
</tpl>
<tpl if="this.isEven(xindex)">
<td width="50%">
<div class="item-wrap" url="{Url}" isPopUp={IsPopUp} >
<div style='padding: 0 5px 5px 5px; float:left;'><img src='{Icon}' ext:qtip='{Title}'/> </div>
<div class="title">
{Title:htmlDecode}<br/>
</div>
<div style='padding: 0 5px 5px 5px; word-wrap: break-word;' class="description">
{Description:htmlDecode}
</div>
</div>
</td>
</tr>
</tpl>
</tpl>
</table>
</dl>
</div>
</tpl>
</div>
</Html>
<Functions>
<ext:JFunction Name="isOdd" Fn="function (i) { return i % 2 == 1; }" />
<ext:JFunction Name="isEven" Fn="function (i) { return i % 2 == 0; }" />
</Functions>
</Tpl>
<Listeners>
</Listeners>
</ext:DataView>
</Items>
<Listeners>
</Listeners>
</ext:Panel>
when I clicked on the menu to insert the page the page is inserted but the component was not rendered at all. Even when I have just this on the page the same thing
<ext:ResourceManager runat="server">
<Listeners>
</Listeners>
</ext:ResourceManager>
<div style="clear: both;">
</div>
<ext:Panel runat="server" Cls="items-view" Layout="fit" AutoHeight="true"
Border="false" ID="Thepanel" IDMode="Explicit">
<Items>
<ext:Label runat="server" Text="Sample Text"></ext:Label>
</Items>
<Listeners>
</Listeners>
</ext:Panel>
</body>
</html>
When I debugged with firefox. The returned page is
<body>
<div style="clear: both;">
</div>
<div id="Thepanel_Container"></div>
</body>
How can this issue be resolved. Strangely, I removed the dataview and added just a panel with an html attribute set to a string and the string was not rendered too. Seems like the ext component are not been processed.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var addTab = function (tabPanel, id, url, menuItem) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id : id,
title : url,
closable : true,
menuItem : menuItem,
loader : {
url : url,
rendererType : "iframe",
loadMask : {
showMask : true,
msg : "Loading " + url + "..."
}
}
});
tab.on("activate", function (tab) {
#{MenuPanel1}.setSelection(tab.menuItem);
});
}
tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window ID="Window1"
runat="server"
Title="Adding tab"
Width="700"
Height="500"
Icon="Link"
Layout="BorderLayout">
<Items>
<ext:MenuPanel
ID="MenuPanel1"
runat="server"
Width="200"
Region="West">
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', ' /Administration/Administration/', this);" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
</Items>
</ext:Window>
</form>
</body>
</html>
the url " /Administration/Administration/'" contains the a dataview defined as shown below
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<div style="clear: both;">
</div>
<ext:Panel runat="server" Cls="items-view" Layout="fit" AutoHeight="true"
Border="false" ID="Thepanel" IDMode="Static">
<Items>
<ext:DataView runat="server" SingleSelect="true" OverClass="x-view-over" ItemSelector="div.items-ct"
AutoHeight="true" >
<Store>
<ext:Store runat="server" AutoLoad="true">
<Proxy>
<ext:AjaxProxy Url='<%# Html.GetUrl("Administration","Administration", "GetAdministratorMenu") %>' AutoDataBind="true">
<Reader>
<ext:JsonReader Root="">
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="Id" >
<Fields>
<ext:ModelField Name="Title" />
<ext:ModelField Name="Items" IsComplex="true" />
</Fields>
</ext:Model>
</Model>
<Listeners>
</Listeners>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<div class="items-ct">
<tpl for=".">
<div>
<table style="width:95%; margin:25px 0px 0px 0px">
<tpl for="Items">
<tpl if="this.isOdd(xindex)">
<tr>
<td width="50%">
<div class="item-wrap" url="{Url}" isPopUp={IsPopUp} >
<div style='padding: 0 5px 5px 5px; float:left;'><img src='{Icon}' ext:qtip='{Title}'/> </div>
<div class="title">
{Title:htmlDecode}<br/>
</div>
<div style='padding: 0 5px 5px 5px; word-wrap: break-word;' class="description">
{Description:htmlDecode}
</div>
</div>
</td>
</tpl>
<tpl if="this.isOdd(xindex) && xcount == xindex">
<td width="50%">
<span class="title"> </span>
</td>
</tr>
</tpl>
<tpl if="this.isEven(xindex)">
<td width="50%">
<div class="item-wrap" url="{Url}" isPopUp={IsPopUp} >
<div style='padding: 0 5px 5px 5px; float:left;'><img src='{Icon}' ext:qtip='{Title}'/> </div>
<div class="title">
{Title:htmlDecode}<br/>
</div>
<div style='padding: 0 5px 5px 5px; word-wrap: break-word;' class="description">
{Description:htmlDecode}
</div>
</div>
</td>
</tr>
</tpl>
</tpl>
</table>
</dl>
</div>
</tpl>
</div>
</Html>
<Functions>
<ext:JFunction Name="isOdd" Fn="function (i) { return i % 2 == 1; }" />
<ext:JFunction Name="isEven" Fn="function (i) { return i % 2 == 0; }" />
</Functions>
</Tpl>
<Listeners>
</Listeners>
</ext:DataView>
</Items>
<Listeners>
</Listeners>
</ext:Panel>
when I clicked on the menu to insert the page the page is inserted but the component was not rendered at all. Even when I have just this on the page the same thing
<ext:ResourceManager runat="server">
<Listeners>
</Listeners>
</ext:ResourceManager>
<div style="clear: both;">
</div>
<ext:Panel runat="server" Cls="items-view" Layout="fit" AutoHeight="true"
Border="false" ID="Thepanel" IDMode="Explicit">
<Items>
<ext:Label runat="server" Text="Sample Text"></ext:Label>
</Items>
<Listeners>
</Listeners>
</ext:Panel>
</body>
</html>
When I debugged with firefox. The returned page is
<body>
<div style="clear: both;">
</div>
<div id="Thepanel_Container"></div>
</body>
How can this issue be resolved. Strangely, I removed the dataview and added just a panel with an html attribute set to a string and the string was not rendered too. Seems like the ext component are not been processed.