May 11, 2016, 11:24 PM
[CLOSED] Panels breaking after collapse or resize.
Hello,
I'm having a strange problem with the content of my panels breaking when I collapse or resize them.
This does not happen every time I resize or collapse a panel. Sometimes it happens immediately and other times it happens after a few tries.
This is what the layout of the panels look like:
After a collapsing or resizing either of the panels, this happens:
The only error I get in the browser debugger is :
"TypeError: a.overflowContext is null ext.axd:19:968263"
I am upgrading our currently working software from Ext.Net 2.5 to Ext.Net 4.0. I am using the same code for the views for both our versions and I do not have this issue with Ext.Net 2.5.
Code for View:
I've tried different layout types, different themes, removing the handler functions as well as different browsers and I have not had any luck.
Any help is greatly appreciated.
I'm having a strange problem with the content of my panels breaking when I collapse or resize them.
This does not happen every time I resize or collapse a panel. Sometimes it happens immediately and other times it happens after a few tries.
This is what the layout of the panels look like:
After a collapsing or resizing either of the panels, this happens:
The only error I get in the browser debugger is :
"TypeError: a.overflowContext is null ext.axd:19:968263"
I am upgrading our currently working software from Ext.Net 2.5 to Ext.Net 4.0. I am using the same code for the views for both our versions and I do not have this issue with Ext.Net 2.5.
Code for View:
X.Panel().Region(Region.Center).Layout(LayoutType.Border).Items(
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.ContentFromPartial("~/Views/Shared/_GoogleMap.cshtml")
.Listeners(ls => ls.BeforeShow.Handler = "TabChangeHandler(null,App.Center.activeTab)")
.Listeners(ls => ls.Show.Handler = @"google.maps.event.trigger(map, 'resize');")
.Listeners(ls => ls.AfterRender.Handler = @"BuildMap(); App.MapDeleteShapeBtn.disable();
google.maps.event.trigger(map, 'resize');
InitializeAssetDetailTabs()")
.Frame(true)
.Items(
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Border)
.Items(
X.Panel()
.Region(Region.West)
.Layout(LayoutType.Border)
.Width(500)
.MinWidth(500)
.Resizable(true)
.Collapsed(true)
.ResizeHandles(ResizeHandle.East)
.Collapsible(true)
.ID("map_streetview_parent")
.Listeners(ls => ls.Collapse.Handler = "google.maps.event.trigger(map, 'resize');")
.Listeners(ls => ls.Resize.Handler = "google.maps.event.trigger(map, 'resize');google.maps.event.trigger(panorama, 'resize');")
.Title("Street View")
.Items(
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Column)
.Header(false)
.ColumnWidth(1.00)
.ID("map_streetview")
),
X.Panel()
.Region(Region.Center)
.Layout(LayoutType.Anchor)
.ID("map_canvas")
),
X.TabPanel()
.ResizeHandles(ResizeHandle.North)
.Height(350)
.Collapsible(true)
.Resizable(true)
.Title("Layers Data")
.ID("MapGridTabs")
.Listeners(ls=> ls.BeforeRender.Fn = @"function(){this.SelectedGridPanelId = mapGridTabGridNames[this.activeTab.id]; console.log(this.SelectedGridPanelId)}")
.Listeners(ls => ls.TabChange.Fn = @"function(){this.SelectedGridPanelId = mapGridTabGridNames[this.activeTab.id]; console.log(this.SelectedGridPanelId)}")
.Listeners(ls => ls.Resize.Handler = "google.maps.event.trigger(map, 'resize');")
.Listeners(ls => ls.Collapse.Handler = "google.maps.event.trigger(map, 'resize');")
.Region(Region.South)
.Layout(LayoutType.Border)
.Items(tabs=>
{
tabs.Add(
X.Panel()
.Layout(LayoutType.Border)
.Icon(Icon.Layers)
.ID("MapLayersGridTab")
.Title("Saved Layers Data")
.Region(Region.Center)
.Listeners(ls => ls.Collapse.Handler = "google.maps.event.trigger(map, 'resize');")
.ItemsFromPartial("~/Views/Shared/_MapLayersGrid.cshtml")
);
tabs.Add(
X.Panel()
.Layout(LayoutType.Border)
.Icon(Icon.ArrowRotateAnticlockwise)
.ID("MapHistoricalGridTab")
.Title("NBI Data")
.Region(Region.Center)
.Listeners(ls => ls.Collapse.Handler = "google.maps.event.trigger(map, 'resize');")
.ItemsFromPartial("~/Views/Shared/_MapHistoricalGrid.cshtml")
);
tabs.Add(
X.Panel()
.Layout(LayoutType.Border)
.Icon(Icon.Lightning)
.ID("MapRenewalGridTab")
.Title("Preservation Plans Data")
.Region(Region.Center)
.Listeners(ls => ls.Collapse.Handler = "google.maps.event.trigger(map, 'resize');")
.ItemsFromPartial("~/Views/Shared/_MapRenewalPlansGrid.cshtml")
);
})
),
X.Panel()
.Region(Region.East)
.Layout(LayoutType.Border)
.Title("Bridge Details")
.ID("AssetDetail")
.Collapsible(true)
.Collapsed(true)
.Listeners(ls => ls.Collapse.Handler = "google.maps.event.trigger(map, 'resize');")
.Listeners(ls => ls.Resize.Handler = @" if('AssetDetailHistory' in chartsDataArray)
drawChart('AssetDetailHistory',chartsDataArray['AssetDetailHistory'][2],chartsDataArray['AssetDetailHistory'][0],chartsDataArray['AssetDetailHistory'][1]); google.maps.event.trigger(map, 'resize');")
.Resizable(true)
.ResizeHandles(ResizeHandle.West)
.MinWidth(500)
.Width(500)
.ItemsFromPartial("~/Views/Shared/_AssetDetailPanel.cshtml")
)
I've tried different layout types, different themes, removing the handler functions as well as different browsers and I have not had any luck.
Any help is greatly appreciated.
Last edited by fabricio.murta; May 16, 2016 at 2:30 PM.