[CLOSED] cannot find component even though they are declared.

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] cannot find component even though they are declared.

    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("");
            }
        },
    Last edited by Daniil; Mar 15, 2012 at 9:53 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    Still same error. That did not resolve the problem.
  4. #4
    I tried your sample and an Exception was thrown. Please provide a simplified .aspx sample which demonstrates how to reproduce the problem.
    Geoffrey McGill
    Founder
  5. #5
    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.
  6. #6
    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("");
            }
        },
  7. #7
    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.
    Geoffrey McGill
    Founder
  8. #8
    Hi,

    Use 'Ext.History' in javascript to reference history control because it is singleton
  9. #9
    Quote Originally Posted by geoffrey.mcgill View Post
    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.
  10. #10
    Did you try Vladimir's suggestion above?
    Geoffrey McGill
    Founder
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 12
    Last Post: Jul 09, 2011, 11:06 PM
  2. [CLOSED] TextField next to a Button declared in Buttons section
    By jeybonnet in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 29, 2011, 7:31 AM
  3. [CLOSED] How to find the component which has the fous?
    By macap in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 12, 2010, 7:05 AM
  4. Replies: 1
    Last Post: May 22, 2009, 7:38 AM
  5. Replies: 2
    Last Post: Mar 30, 2009, 8:29 AM

Posting Permissions