[CLOSED] Panels breaking after collapse or resize.

Page 1 of 2 12 LastLast
  1. #1

    [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:

    Click image for larger version. 

Name:	Working State.jpg 
Views:	96 
Size:	93.9 KB 
ID:	24606

    After a collapsing or resizing either of the panels, this happens:

    Click image for larger version. 

Name:	Broken State.jpg 
Views:	110 
Size:	91.3 KB 
ID:	24607

    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.
  2. #2
    Hello @ids! Welcome to Ext.NET forums!

    Your report is clear and we see that something went really wrong in your page during collapse/expand of panels. But just with the view code it is hard for us to pinpoint the cause and, if a bug, effectively offer you an actual fix (maybe temporary or fix in our main sources).

    That said, I see you are using Border Layout and positioning your panels on different regions. Giving the user the freedom to extend or contract whichever panel he wants.

    Do you think you can either reproduce this issue on one of our examples (in examples explorer) or write a simple (yet runnable) example so we can reproduce the issue in our side?

    If in doubt on how to come up with a simple runnable example, please refer to these posts:
    - Forum Guidelines For Posting New Topics
    - More information required

    I know a similar example showcasing the border layout feature with collapsible panels here: Complex BorderLayout in Markup (sorry, it is in WebForms, but you can navigate and get a simpler one to base off and draw it in MVC if you are not comfortable with WebForms)

    But I've given this example some tries and couldn't reproduce the issue you described. Maybe you can reproduce the issue on that example and tell us exactly how you reproduce it? Or maybe use this as a base to draw an example (either in WebForms or MVC provided model+view+controller code).
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I believe the issue I am having is caused by trying to load google maps onto an Ext.Net Panel with id = 'map_canvas'.

    When I disable the loading of google map, all of the panels behave normally, which leads me to believe that this issue is caused by the way google map is loaded into the panel.

    In my code I have a BuildMap() function which uses this line to load the map on to the panel.

     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    The panel that the map is loaded to is this

    X.Panel()
    .Region(Region.Center)
    .Layout(LayoutType.Anchor)
    .ID("map_canvas")
    Ideally google API requires this html div to load the map

    <div id="map_canvas" style="width: 100 %; height: 100 %"></div>
    However, with EXT.Net 2.5 I could get away with not defining that div and just pass the Id of my panel instead.
    But this method does not seem to work in Ext.Net 4.0, so I tried this

    X.Panel()
    .Region(Region.
    .Layout(LayoutType.
    .Html(@"<div id=""map_canvas"" style=""width: 100 %; height: 100 % ""></div>")
    This solves the issue with resizing and collapsing panels, however, the map does not load anymore.

    Click image for larger version. 

Name:	No google maps.jpg 
Views:	60 
Size:	102.1 KB 
ID:	24609

    I've done some research and I see that the solution used for ExtJs is Ext.ux.GMapPanel which I believe is deprecated in Ext.Net 4.0.

    Is there any other way that I can load google maps onto my panel?

    Thanks again,

    Massoud
    Last edited by geoffrey.mcgill; May 12, 2016 at 9:14 PM.
  4. #4
    Hi.

    Try setting .HideMode(HideMode.Offsets) on the Panel that is giving you the problems.

    Hope this helps.
    Geoffrey McGill
    Founder
  5. #5
    I tried your suggestion.

    .HideMode(HideMode.Offsets)
    Did not work.
  6. #6
    If you add a google map with:

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    and your Panel is .ID("map_canvas"), that is not going to work because the Panel does not create a <div id="map_canvas">.

    I would certainly expect setting .Html with a div to work:

    .Html(@"<div id=""map_canvas"" style=""width: 100 %; height: 100 % ""></div>")
    I tried running your sample, but a bunch of errors were thrown. If you can provide a simplified sample demonstrating the scenario, then we should able to test locally.
    Geoffrey McGill
    Founder
  7. #7
    This solves the issue with resizing and collapsing panels, however, the map does not load anymore.
    This sounds like an issue related to lifecycle timing. You might be running this code before the <div> has been created or otherwise available.
    Geoffrey McGill
    Founder
  8. #8
    Thanks for they reply.

    I have created a small sample posted here:

    https://github.com/massoud07/Ext-Net-Sample

    To reproduce the problem, simply play with the collapse toggles of the panels and resize until they break. Sometimes this happens immediately, other times it takes a few tries.

    Here are a few images of it in working state and broken states.

    Click image for larger version. 

Name:	Broken Sample 2.png 
Views:	78 
Size:	19.2 KB 
ID:	24610Click image for larger version. 

Name:	Broken Sample.jpg 
Views:	56 
Size:	82.2 KB 
ID:	24611Click image for larger version. 

Name:	Working Sample.jpg 
Views:	75 
Size:	95.9 KB 
ID:	24612


    The parent layout file is in Views/ExtNet/Index.cshtml and the remaining files are in Views/Shared
    Last edited by ids; May 13, 2016 at 1:02 AM.
  9. #9
    Hello @ids!

    Awesome github sample! I could run here. Only issue on the sample you made is that seems that the packages are partially committed, so just by cloning the repo the project doesn't build. I had to remove the packages/* directories (except packages/repositories.config) and let VS' NuGet restore the packages -- and voila.

    Removing the nuGet packages from github also would let the cloning process be much faster (as we need to pull again the packages via nuget restore anyway).

    Well, beside that, I could reproduce your issue, and it seems that this problem is related to allowing the panels to 'float' when expanding. Do you want this functionality at all? Or what you need is just to toggle the panels when the title is clicked?

    Check it out: Just add .TitleCollapse(true) to your collapsible panels and (at least to me) it works fine.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Thanks for the reply.

    I tried your suggestion by adding .TitleCollapse(true) to the collapsible panels and It still does not work for me.

    Click image for larger version. 

Name:	Broken Sample 3.jpg 
Views:	80 
Size:	88.2 KB 
ID:	24613

    The IDs for the panels I added this to are

    .ID("map_streetview_parent")
    .ID("MapGridTabs")
    .ID("AssetDetail")
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 9
    Last Post: Dec 12, 2012, 5:04 AM
  2. Replies: 3
    Last Post: Aug 11, 2011, 11:07 AM
  3. Force Panels Render Again when Resize Parent
    By nanosassa in forum 1.x Help
    Replies: 2
    Last Post: Nov 20, 2009, 9:44 AM
  4. Sub Panels Sometimes Disappear on Collapse
    By mathec in forum 1.x Help
    Replies: 4
    Last Post: Jan 28, 2009, 5:17 PM
  5. [CLOSED] Collapse - Expand Panels?
    By MrMp3 in forum 1.x Help
    Replies: 12
    Last Post: Sep 15, 2008, 10:58 AM

Posting Permissions