PDA

View Full Version : [CLOSED] cannot find component even though they are declared.



RCM
Mar 08, 2012, 8:19 PM
I am running into issues I get the error message "Elementid is undefined".

For instance on my masterpage I have the following layout





<body >
<form id="fileform" runat="server" class="x-hide-display">
<CuteWebUI:Uploader runat="server" />
</form>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<ext:ResourceManager ID="MasterResourceManager" runat="server" Namespace="">

</ext:ResourceManager>

<ext:ViewPort ID="ViewPortMain" runat="server" Layout="border" MonitorResize="true" IDMode="Explicit">

<Items>
<ext:Panel ID="westPanel"
runat="server"
Title="<%$ Resources:WebResources|Common.FormLabels, Navigator %>"
Region="West"
Collapsible="true"
Layout="FitLayout"
Margins="0 0 3 3"
Collapsed="False"
Split="true" ButtonAlign="Left" MonitorResize="True" MinWidth="200" >
<Listeners>
</Listeners>


</ext:Panel>
<ext:TabPanel
ID="tpMain"
runat="server"
Region="Center"
Margins="0 0 4 0"
EnableTabScroll="true" TabWidth="10px" TabPosition="Top">
<Items>
<ext:Panel
ID="HomeTab"
layout="Fit"
runat="server"
Title="<%$ Resources:WebResources|Home.FormLabels, Home %>"
Icon="ApplicationForm"
Border="false" AutoScroll="true">
<Listeners>

</Listeners>
</ext:Panel>
</Items>
<ToolTips>
<ext:ToolTip runat="server" Delegate="#tpMain__HomeTab" Html="Home" />
</ToolTips>
<Listeners>
<TabChange Fn="History.addToken" />
</Listeners>
</ext:TabPanel>
</Items>

<Listeners>
<AfterRender Handler="" />
</Listeners>
</ext:ViewPort>

<ext:DragZone runat="server" Scroll="false" Target="={westPanel.getEl()}" Group="menu-items">
<GetDragData Fn="getDragData" />
<GetRepairXY Fn="getRepairXY" />
</ext:DragZone>

<ext:DropTarget runat="server" Target="={gpSelectedADUsersAddADUser.view.scroller.dom}" Group="ADUserSelectedGroup">
<NotifyDrop Fn="AddAdUserWindow.AdUserDropped" />
</ext:DropTarget>

<ext:DropTarget runat="server" Target="={gpSelectedUser.view.scroller.dom}" Group="UserSelectedGroup">
<NotifyDrop Fn="SharePage.UserDropped" />
</ext:DropTarget>

<emb:ExceptionMessageBox runat="server" ID="ExceptionMsgBox"/>
<ul id="managementContextMenu" class="contextMenu">
<li runat="server" class="delete">
<asp:HyperLink runat="server" href="#delete" CssClass="delete">
<asp:Literal runat="server" Text="<%$ Resources:WebResources|Common.FormLabels, Delete %>" ></asp:Literal>
</asp:HyperLink></li>
</ul>

<ul id="navigationContextMenu" class="contextMenu">
<li runat="server" class="delete">
<asp:HyperLink runat="server" href="#Add" CssClass="delete">
<asp:Literal runat="server" Text="<%$ Resources:WebResources|Common.FormLabels, AddToWorkItem %>" ></asp:Literal>
</asp:HyperLink></li>
</ul>

<ul class="contextMenu">
<li class="edit"><a href="#edit">Edit</a></li>
<li class="cut separator"><a href="#cut">Cut</a></li>
<li class="copy"><a href="#copy">Copy</a></li>
<li class="paste"><a href="#paste">Paste</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
<li class="quit separator"><a href="#quit">Quit</a></li>
</ul>


<ext:History ID="tabHistory" runat="server" IDMode="Explicit">
<Listeners>
<Change Fn="History.change" />
</Listeners>
</ext:History>
</body>




In the code below I get the error message that the tabHistory is undefined and any other of the element under the view port. The only element that can be resolved in that function is the viewport ID tpMain. This use to work in v1 what do I need to do to resolve this?




addToken: function (el, tab) {
if (Ext.isDefined(tab) && tab.autoLoad && tab.autoLoad.url && tab.id != "HomeTab") {


var token = Ext.String.format(tab.autoLoad.url + "?title={0}&&icon={1}&&passParentSize={2}&&navItem={3}", tab.initialConfig.title, tab.initialConfig.iconCls, true, navItemId);

if (!Ext.isEmpty(token)) {
tabHistory.add(token);

}
} else {
tabHistory.add("");
}
},

Daniil
Mar 08, 2012, 8:34 PM
Hi,

The IDMode="Explicit" functionality has been changed in Ext.NET v2. Now it doesn't cause ClientID to be equal ID.

Please set up IDMode="Static" for the History, then you can access it via "tabHistory" reference.

RCM
Mar 08, 2012, 8:53 PM
Still same error. That did not resolve the problem.

geoffrey.mcgill
Mar 08, 2012, 8:55 PM
I tried your sample and an Exception was thrown. Please provide a simplified .aspx sample which demonstrates how to reproduce the problem.

RCM
Mar 08, 2012, 9:17 PM
The sample I have is very basic. a viewport with other object declared beneath it. its a master page so you need to associate it with an index page.

RCM
Mar 08, 2012, 9:58 PM
This is the master page



<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<%-- Override the default label seperator and set to ""--%>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.Component.prototype.labelSeparator = "";
</script>
<script src="/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>

<asp:ContentPlaceHolder ID="ScriptPlaceHolder" runat="server" />
</head>
<body >
<asp:ContentPlaceHolder ID="MainContent" runat="server" />

<ext:ResourceManager ID="MasterResourceManager" runat="server" Namespace="">

</ext:ResourceManager>

<ext:ViewPort ID="ViewPortMain" runat="server" Layout="border" MonitorResize="true" IDMode="Static">


<Items>

<ext:Toolbar
runat="server"
Region="North"
Height="25"
Margins="0 0 4 0">
<Items>

<ext:Button ID="ProfileMenu" IDMode="Explicit" TabIndex="1" Cls="buttonMarginCSS"
runat="server"
Icon="StatusOnline"
Text='Test Inset tab'
AutoDataBind="true">
<Listeners>
<Click Handler="Addtab()"/>
</Listeners>
</ext:Button>
</ext:Toolbar>

<ext:Panel ID="westPanel"
runat="server"
Title=" Navigator"
Region="West"
Collapsible="true"
Layout="FitLayout"
Margins="0 0 3 3"
Collapsed="False"
Split="true" ButtonAlign="Left" MonitorResize="True" MinWidth="200" >
</ext:Panel>
<ext:TabPanel
ID="tpMain"
runat="server"
Region="Center"
Margins="0 0 4 0"
EnableTabScroll="true" TabWidth="10px" TabPosition="Top">
<Items>
<ext:Panel
ID="HomeTab"
layout="Fit"
runat="server"
Title="Home"
Icon="ApplicationForm"
Border="false" AutoScroll="true">
<Listeners>

</Listeners>
</ext:Panel>
</Items>
<ToolTips>
<ext:ToolTip runat="server" Delegate="#tpMain__HomeTab" Html="Home" />
</ToolTips>
<Listeners>
<TabChange Fn="History.addToken" />
</Listeners>
</ext:TabPanel>
</Items>

<Listeners>
<AfterRender Handler="" />
</Listeners>
</ext:ViewPort>

<ext:DragZone runat="server" Scroll="false" Target="={westPanel.getEl()}" Group="menu-items">
<GetDragData Fn="getDragData" />
<GetRepairXY Fn="getRepairXY" />
</ext:DragZone>
<%--<ext:DropTarget runat="server" Target="={HomeTab.body}" Group="menu-items">
<NotifyDrop Fn="notifyDrop" />
</ext:DropTarget> --%>

<ext:DropTarget runat="server" Target="={gpSelectedADUsersAddADUser.view.scroller.dom}" Group="ADUserSelectedGroup">
<NotifyDrop Fn="AddAdUserWindow.AdUserDropped" />
</ext:DropTarget>

<ext:DropTarget runat="server" Target="={gpSelectedUser.view.scroller.dom}" Group="UserSelectedGroup">
<NotifyDrop Fn="SharePage.UserDropped" />
</ext:DropTarget>


<ext:History ID="tabHistory" runat="server" IDMode="Static">
<Listeners>
<Change Fn="History.change" />
</Listeners>
</ext:History>
</body>
</html>

The javascript functions are

// this function actually throws an Ext exception in the load method. I have created a thread for it.
AddTab:function()
{
var id=randomid;
Ext.Function.defer(function () {

tab = tpMain.addTab({
id: id.toString(),
title: title,
tabTip: config.title,
iconCls: config.icon || 'icon-arrowmerge',
closable: isClosable,
autoStroll: true,
listeners: {

},
loader: {
url: "/ProcessManagement/ProcessManagement/",
loadMask: false,
scripts: true,
autoLoad: true,
passParentSize: true,
params:
{
"tabId": id.toString()
}
}

});
}, 100);

}





addToken: function (el, tab) {
if (Ext.isDefined(tab) && tab.autoLoad && tab.autoLoad.url && tab.id != "HomeTab") {

var navItemId = History.GetSelectedNavigationMenuId();
var token = Ext.String.format(tab.autoLoad.url + "?title={0}&&icon={1}&&passParentSize={2}&&navItem={3}", tab.initialConfig.title, tab.initialConfig.iconCls, true, navItemId);

if (!Ext.isEmpty(token)) {

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>undefined object tabHistory<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
tabHistory.add(token);

History.configLookUp[tab.autoLoad.url] = token;
}
} else {
tabHistory.add("");
}
},

geoffrey.mcgill
Mar 08, 2012, 10:57 PM
Thanks for the sample, although I'm still not able to get this working. Errors and parsing exceptions are being thrown.

Are all those Components required to reproduce the issue? Can you simplify? If the Masterpage is required to reproduce, then I'm going to assume there's a client-side ID issue somewhere.

Vladimir
Mar 09, 2012, 11:13 AM
Hi,

Use 'Ext.History' in javascript to reference history control because it is singleton

RCM
Mar 12, 2012, 10:56 PM
Thanks for the sample, although I'm still not able to get this working. Errors and parsing exceptions are being thrown.

Are all those Components required to reproduce the issue? Can you simplify? If the Masterpage is required to reproduce, then I'm going to assume there's a client-side ID issue somewhere.



I have tried to trim and produce a bare minimum to reproduce the error. This is an index page and does not depend on any masterpage. See 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,
renderer : "frame",
loadMask : {
showMask : true,
msg : "Loading " + url + "..."
}
}
});

tab.on("activate", function (tab) {
#{MenuPanel1}.setSelection(tab.menuItem);
});
}

tabPanel.setActiveTab(tab);

>>>>>>>>>>>>>>>>>>> complains that tabHistory is not defined<<<<<<<<<<<<<<<<<<<<<<<<<<<<
tabHistory.add("www.google.com");
}
</script>
</ext:XScript>
</head>
<body>

<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:History ID="tabHistory" runat="server" IDMode="Static">
<Listeners>
<Change Fn="History.change" />
</Listeners>
</ext:History>
<ext:ViewPort ID="ViewPortMain" runat="server" Layout="border" MonitorResize="true" IDMode="Explicit">

<Items>
<ext:Panel ID="westPanel"
runat="server"
Title="Navigator"
Region="West"
Collapsible="true"
Layout="FitLayout"
Margins="0 0 3 3"
Collapsed="False"
Split="true" ButtonAlign="Left" MonitorResize="True" MinWidth="200" >

<Items>
<ext:MenuPanel
runat="server"
Width="200"
Region="West">
<Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Ext.NET">
<Listeners>
<Click Handler="addTab(#{TabPanel1}, 'idClt', '/Administration/Administration/', this);" />
</Listeners>
</ext:MenuItem>
</Items>
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
</Items>
</ext:ViewPort>
</form>
</body>
</html>



The /Administration/Administration is a view with the following markup




<ext:ResourceManager runat="server">
<Listeners>
<AjaxRequestException Fn="ErrorHandler.HandleSessionError" />
</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" Html="sample test">
<Items>

</Items>
</ext:Panel>


I have removed all the dependency and I hope you can reproduce the problem. Complains that tabHistory is undefined.

geoffrey.mcgill
Mar 12, 2012, 11:28 PM
Did you try Vladimir's suggestion above?

RCM
Mar 13, 2012, 2:23 PM
Just did. Seems to work but I have not tested extensively.