open dynamic tab panel frame from MenuItem Click Error only in IE

  1. #1

    open dynamic tab panel frame from MenuItem Click Error only in IE

    I came into an issue that's appearing only in IE, specifically IE 10
    The issue appears when a dynamically created menu is clicked and a handler is called to open a new frame panel in a center tabpanel, the error message is the following:
    Javascript Error: Unable to get property 'border Info' of undefined or null reference

    Error happening in webresource part:
    // make sure we can use these value w/o calling methods to get them
     ownerContext.borderInfo  || ownerContext.getBorderInfo();
            ownerContext.paddingInfo || ownerContext.getPaddingInfo();
            ownerContext.frameInfo   || ownerContext.getFrameInfo();
            bodyContext.borderInfo   || bodyContext.getBorderInfo();
            bodyContext.paddingInfo  || bodyContext.getPaddingInfo();
    The bodyContext is null that's why I believe the error is appearing, but only in IE browser

    Add tab panel javascript function:
    function AddMenuTab(Id, Title, Url, Closable, fromTree) {
        var UserType = App.hidUserType.value;
        var MainId = Id;
        if (!mainTabPanel)
            mainTabPanel = parent.Ext.getCmp("mainTabPanel");
        Id = Id + "_" + Title.replace(" ", "_");
        ExistingTab = mainTabPanel.getComponent(Id);
        if (ExistingTab) {
            mainTabPanel.setActiveTab(Id);
        }
        else {
            var panel = Ext.create("Ext.panel.Panel", {
                id: Id,
                title: Title,
                frame: true,
                split: true,
    //            bodyBorder: true,
    //            border: 1,
                collapsible: true,
    //            bodyPadding: 3,
    //            padding: '5 5 3 5',
    //            html: '<iframe Id="frm' + Id + '" Name="frm' + Id + '" runat="server" frameborder="0" width="100%" height="100%" src="' + Url + '" />',
                autoScroll: true,
                layout: 'fit',
                loader: {
                    url: Url,
                    renderer: "frame",
                    listeners: {
                        beforeload: function () {
                            parent.Ext.get('maskDiv').removeCls('x-hide-display');
                        },
                        load: function () {
                            parent.Ext.get('maskDiv').addCls('x-hide-display');
                        }
                    },
                    loadMask: {
                        showMask: true,
                        msg: "Loading " + Title + "..."
                    }
                },
                showMask: true,
                closable: Closable
            });
            mainTabPanel.add(panel).show();
        }
        mainTabPanel.doLayout();
    }

    Our application is built in a viewport having border layout, created dynamically in code below:

    protected void Page_Load(object sender, EventArgs e)
    {
                   try
                   {
                                  if (!IsPostBack && !X.IsAjaxRequest)
                                  {
                                                 IList<AbstractComponent> lstRegions = new List<AbstractComponent>();
                                                 IList<AbstractComponent> lstWestRegions = new List<AbstractComponent>();
                                                
                                                 Ext.Net.Panel centerPanel = new Ext.Net.Panel
                                                 {
                                                                Region = Region.Center,
                                                                Title = this.FullName,
                                                                Layout = "BorderLayout",
                                                                Split = true
                                                 };
     
                                                 TabPanel.Config centerConfig = new TabPanel.Config();
                                                 centerConfig.Region = Region.Center;
                                                 centerConfig.ActiveTabIndex = 0;
                                                 centerConfig.Split = true;
                                                 centerConfig.Collapsible = true;
                                                 centerConfig.Header = false;
                                                 TabPanel mainTabPanel = new TabPanel(centerConfig);
                                                 mainTabPanel.ID = "mainTabPanel";
                                                 mainTabPanel.Frame = true;
                                                                                                                           
                                                 Ext.Net.Panel main = new Ext.Net.Panel("Dashboard", Icon.ReportGo);
                                                 mainTabPanel.Add(main);                    
                                                 centerPanel.Add(mainTabPanel);                    
     
                                                 // North Region
                                                 ComponentLoader.Config cHeaderMenuConfig = new ComponentLoader.Config();
                                                 cHeaderMenuConfig.Mode = LoadMode.Frame;
                                                 cHeaderMenuConfig.Url = "MenuHeader.aspx?";                    
                                                 ComponentLoader cHeaderMenuLoader = new ComponentLoader(cHeaderMenuConfig);
     
                                                 Ext.Net.Panel north = new Ext.Net.Panel
                                                 {
                                                                Region = Region.North,
                                                                Title = "",
                                                                Frame = true,
                                                                Loader = cHeaderMenuLoader,
                                                                MinHeight = 100,
                                                                Height = Unit.Pixel(120),
                                                                Dock = Ext.Net.Dock.Bottom,
                                                                BodyPadding = 6,                        
                                                                Split = true,
                                                                Collapsible = true,                        
                                                                HeaderConfig = new PanelHeader
                                                                {
                                                                               Region = Ext.Net.Region.Center,
                                                                               Items = 
                                                                               { 
                                                                                              new Ext.Net.Button("logout", "logout")
                                                                                                             {
                                                                                                                Icon = Icon.DoorOut,
                                                                                                                Region = Region.Center,                                       
                                                                                                                Loader = new ComponentLoader
                                                                                                                {
                                                                                                                               LoadMask = 
                                                                                                                               {
                                                                                                                                              ShowMask = true,
                                                                                                                                              Msg = "Logout..."
                                                                                                                               }
                                                                                                                }
                                                                                                             }
                                                                               }
                                                                }
                                                 };
                                                 centerPanel.Add(north);
                                                 lstRegions.Add(centerPanel);                    
     
                                                 // East Region
                                                 Ext.Net.Panel east = new Ext.Net.Panel
                                                 {
                                                                Region = Region.East,
                                                                Layout = "FitLayout",
                                                                Title = "Statistics",
                                                                Width = 225,
                                                                MinWidth = 225,
                                                                Split = true,
                                                                Collapsible = true,
                                                                Items = 
                                                                                              { 
                                                                                                             new TabPanel
                                                                                                             {
                                                                                                                            ActiveTabIndex = 1,
                                                                                                                            TabPosition = TabPosition.Bottom,
                                                                                                                            BodyBorder = 0,
                                                                                                                            Items = 
                                                                                                                            { 
                                                                                                                                           new Ext.Net.Panel
                                                                                                                                           {
                                                                                                                                                          Title = "Tab 1",
                                                                                                                                                          BodyBorder = 0,
                                                                                                                                                          BodyPadding = 6,
                                                                                                                                                          Html = "East Tab 1"
                                                                                                                                           },
                                                                                                                                           new Ext.Net.Panel
                                                                                                                                           {
                                                                                                                                                          Title = "Tab 2",
                                                                                                                                                          BodyBorder = 0,
                                                                                                                                                          BodyPadding = 6,
                                                                                                                                                          Html = "East Tab 2"
                                                                                                                                           }
                                                                                                                            }
                                                                                                             }
                                                                                              }
                                                 };                    
     
                                                 // West Region
                                                 Ext.Net.Panel west = new Ext.Net.Panel
                                                 {
                                                                Region = Region.West,
                                                                Title = "Navigation Pane",
                                                                Width = Unit.Pixel(225),
                                                                Layout = "AccordionLayout",
                                                                MinWidth = 225,
                                                                MaxWidth = 400,
                                                                Split = true,
                                                                Collapsible = true
                                                 };
                                                 ComponentLoader.Config cUserTreeLoaderConfig = new ComponentLoader.Config();
                                                 cUserTreeLoaderConfig.Mode = LoadMode.Frame;
                                                 cUserTreeLoaderConfig.Url = "NavigationTree.aspx?";                    
                                                 ComponentLoader cUserTreeLoader = new ComponentLoader(cUserTreeLoaderConfig);
                                                 Ext.Net.Panel westUserTree = new Ext.Net.Panel
                                                 {
                                                                ID = "pnlNavigationTree",
                                                                Title = "Navigation Tree",
                                                                Frame = true,
                                                                Html = "",
                                                                Loader = cUserTreeLoader,
                                                                BodyBorder = 0,
                                                                BodyStyle = "padding:6px;",
                                                                Layout = "FormLayout",
                                                                Icon = Icon.FolderGo
                                                 };
                                                 lstWestRegions.Add(westUserTree);
     
                                                 ComponentLoader.Config cSimTreeLoaderConfig = new ComponentLoader.Config();
                                                 cSimTreeLoaderConfig.Mode = LoadMode.Frame;
                                                 cSimTreeLoaderConfig.Url = "SimcardTree.aspx?";                    
                                                 ComponentLoader cSimTreeLoader = new ComponentLoader(cSimTreeLoaderConfig);
                                                 Ext.Net.Panel westSimTree = new Ext.Net.Panel
                                                 {
                                                                ID = "pnlSettings",
                                                                Title = "Sim Cards",
                                                                Frame = true,
                                                                Html = "",
                                                                Loader = cSimTreeLoader,
                                                                BodyBorder = 0,
                                                                BodyStyle = "padding:6px;",
                                                                Layout = "FormLayout",
                                                                Icon = Icon.FolderWrench
                                                 };
                                                 lstWestRegions.Add(westSimTree);
                                                 west.Add(lstWestRegions);
                                                 lstRegions.Add(west);                 
     
                                                 viewport.Add(lstRegions);
                                                 viewport.Listeners.AfterRender.Handler = "setTimeout(function () {Ext.get('maskDiv').addCls('x-hide-display');}, 6000);";                    
                                  }
                   }
                   catch (Exception ex)
                   {
                                  throw new CustomException(ex, ErrorType.Base);
                   }
    }
    in MenuHeader.aspx page:

    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false"
            IDMode="Explicit" />
        <ext:Hidden ID="hidUserType" runat="server">
        </ext:Hidden>
        <div>
            <ext:Toolbar ID="MenuToolbar" runat="server">
            </ext:Toolbar>
        </div>
        </form>
    in code behind MenuHeader.aspx.cs have:

    private void ProcessMenus()
            {
                try
                {
                    List<CustomMenuItem> CustomMenuItemList = GetParentMenus("Acctg_Cdr_menu");
                    IList<AbstractComponent> lstMenuItems = new List<AbstractComponent>();
                    Ext.Net.Button ParentMenuItem = new Ext.Net.Button();
                    Ext.Net.SplitButton ParentClickMenuItem = new Ext.Net.SplitButton();
                    bool HasChildren = false;
                    foreach (CustomMenuItem obj in CustomMenuItemList)
                    {                    
                        CustomMenuItem ParentCustomMenuItem = new CustomMenuItem(obj.ContentId);
                        List<CustomMenuItem> CustomMenuItemChildList = GetChildMenus(ParentCustomMenuItem, "Acctg_Cdr_menu");
                        if (CustomMenuItemChildList.Count > 0)
                        {
                            HasChildren = true;
                            ParentMenuItem = new Ext.Net.Button
                            {
                                Text = obj.Text,
                                ItemID = obj.Value,
                                IconUrl = obj.ImageUrl,
                                Menu = {                                
                                          new Ext.Net.Menu
                                          {
                                              TagString = obj.ContentId.ToString(),                                          
                                              Items = {
                                                  new Ext.Net.MenuItem { IconCls="x-loading-indicator", Text="Loading...", CanActivate=false, HideOnClick=false }
                                              },
                                              Loader = new ComponentLoader
                                              {
                                                  Mode=LoadMode.Component,
                                                  ShowWarningOnFailure = false,                                              
                                                  DirectMethod="#{DirectMethods}.Items",  
                                                  RemoveAll=true,
                                                  Params = {
                                                                new Ext.Net.Parameter("tag", "this.tag", ParameterMode.Raw)
                                                           }
                                              }
                                          }
                                     }
     
                            };
                        }
                        else
                        {
                            HasChildren = false;
                            ParentClickMenuItem = new Ext.Net.SplitButton
                            {
                                Text = obj.Text,
                                ItemID = obj.Value,
                                IconUrl = obj.ImageUrl,
                                MenuArrow = false,
                                Listeners =
                                {
                                    Click =
                                    {
                                        Handler = "AddMenuTab('" + obj.ContentId + "', '" + obj.Text + "', '" + obj.NavigateUrl + "', true, false)"
                                    }
                                }
                            };                        
                        }                   
                                             
                                                                               if (HasChildren)                        
                                                                                              lstMenuItems.Add(ParentMenuItem);                        
                                                                               else
                                                                                              lstMenuItems.Add(ParentClickMenuItem);                    
                    }
                    MenuToolbar.Items.Add(lstMenuItems);
                }
                catch (Exception ex)
                {
                    throw new CustomException(ex, ErrorType.Base);
                }
            }
     
            [DirectMethod(Timeout = 900000)]
            public string Items(Dictionary<string, string> parameters)
            {
                try
                {
                    string MenuItemContentId = parameters["tag"];
                    CustomMenuItem ParentCustomMenuItem = new CustomMenuItem(Converter.ToInt(MenuItemContentId));
                    List<CustomMenuItem> CustomMenuItemChildList = GetChildMenus(ParentCustomMenuItem, "Acctg_Cdr_menu");
                    List<Ext.Net.MenuItem> items = new List<Ext.Net.MenuItem>();
                    Ext.Net.MenuItem ChildMenuItem = null;
                    foreach (CustomMenuItem obj in CustomMenuItemChildList)
                    {
                        ChildMenuItem = new Ext.Net.MenuItem();                    
                        ChildMenuItem.Text = obj.Text;
                        ChildMenuItem.ItemID = obj.Value;                    
                        ChildMenuItem.Listeners.Click.Handler = "AddMenuTab('" + obj.ContentId + "', '" + obj.Text + "', '" + obj.NavigateUrl + "', true, false)";  
                        ChildMenuItem.IconUrl = obj.ImageUrl;                    
                      
                        items.Add(ChildMenuItem);                    
                    }
                    return ComponentLoader.ToConfig(items);
                }
                catch (Exception ex)
                {
                    throw new CustomException(ex, ErrorType.Base);
                }
            }
    Last edited by DenisEdde; Jun 06, 2013 at 8:48 PM. Reason: Remove <b> and <i> tags
  2. #2
    Hello,

    Thanks for the report.

    Any chance you could edit your original post and remove all the extra <b> and <i> tags that were added during copy/paste?
    Geoffrey McGill
    Founder & CEO
  3. #3
    Sure took them out

    Quote Originally Posted by geoffrey.mcgill View Post
    Hello,

    Thanks for the report.

    Any chance you could edit your original post and remove all the extra <b> and <i> tags that were added during copy/paste?
  4. #4
    Hi,

    I have never met such an error yet and I can't see any explicit reasons of this error.

    I was trying to combine your code snippets to get a runnable sample, but, unfortunately, with no success.

    Here is a pair of options.

    1. Ideally. Please provide us a runnable and simplified test case. This technique can help.
    How to prepare a sample

    2. Provide us with an online example.

    Whatever you choose please provide us with the exact steps how to reproduce it.

    By the way, what Ext.NET version are you using? If something prior to v2.2, please try with v2.2 to ensure it was not fixed.
    Last edited by Daniil; Jun 10, 2013 at 12:25 PM.
  5. #5
    Hi Daniil,

    I am using version 2.2, will provide you with a runnable and simplified test case asap, i am little busy with other stuff now so maybe in 2 days.
    Thanks for the help

    Quote Originally Posted by Daniil View Post
    Hi,

    I have never met such an error yet and I can't see any explicit reasons of this error.

    I was trying to combine your code snippets to get a runnable sample, but, unfortunately, with no success.

    Here is a pair of options.

    1. Ideally. Please provide us a runnable and simplified test case. This technique can help.
    How to prepare a sample

    2. Provide us with an online example.

    Whatever you choose please provide us with the exact steps how to reproduce it.

    By the way, what Ext.NET version are you using? If something prior to v2.2, please try with v2.2 to ensure it was not fixed.
  6. #6
    Hi All,

    Well the issue is fixed when I changed the north panel to html and not frame.
    As i faced another issue with ext menu in the north panel frame were the menu when clicked was showing only in north panel and not stretching over center tab panel, tried many solutions (z-index, floating, toFront, ...) to fix the menu issue with no luck at all until i removed the frame from the north panel and created the menu directly in the north panel which solved the menu issue and to my luck solved the IE error that i mentioned in this thread.

    Question: What were the possible solutions, if any, for the IE error or the menu items If the north panel must stay as a frame? (can it be that the panel frames design in all regions was too much?)

    Quote Originally Posted by DenisEdde View Post
    Hi Daniil,

    I am using version 2.2, will provide you with a runnable and simplified test case asap, i am little busy with other stuff now so maybe in 2 days.
    Thanks for the help
    Last edited by DenisEdde; Jun 11, 2013 at 5:31 PM.
  7. #7
    Quote Originally Posted by DenisEdde View Post
    Well the issue is fixed when I changed the north panel to html and not frame.
    As i faced another issue with ext menu in the north panel frame were the menu when clicked was showing only in north panel and not stretching over center tab panel, tried many solutions (z-index, floating, toFront, ...) to fix the menu issue with no luck at all until i removed the frame from the north panel and created the menu directly in the north panel which solved the menu issue and to my luck solved the IE error that i mentioned in this thread.
    If a menu or anything else is created within an iframe page, it cannot overlap the parent page (on the HTML level, not Ext.NET).

    Quote Originally Posted by DenisEdde View Post
    Question: What were the possible solutions, if any, for the IE error or the menu items If the north panel must stay as a frame? (can it be that the panel frames design in all regions was too much?)
    Please clarify are you talking here about the initial problem (which you described in the initial post)?
  8. #8
    Was talking about both.
    As i don't have much experience in iframes didn't know that it couldn't overlap over another iframe.
    Will send you a working sample for the initial problem which was occurring only in IE.

    Many thanks

    Quote Originally Posted by Daniil View Post
    If a menu or anything else is created within an iframe page, it cannot overlap the parent page (on the HTML level, not Ext.NET).



    Please clarify are you talking here about the initial problem (which you described in the initial post)?

Similar Threads

  1. Click a Menu:menuitem from a different panel
    By gdog_5021 in forum 2.x Help
    Replies: 1
    Last Post: May 08, 2013, 6:30 PM
  2. [CLOSED] Panel Loader Url change on MenuItem Click
    By GGage in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 04, 2013, 1:49 PM
  3. Replies: 1
    Last Post: Jan 19, 2013, 3:34 AM
  4. Replies: 1
    Last Post: May 21, 2012, 8:36 AM
  5. How to get parent menuItem when click menuItem?
    By zhangsir199 in forum 1.x Help
    Replies: 2
    Last Post: Jan 21, 2011, 2:58 AM

Posting Permissions