Jun 06, 2013, 4:16 PM
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
Add tab panel javascript function:
Our application is built in a viewport having border layout, created dynamically in code below:
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 browserAdd 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