[CLOSED] Expanded West Region Panel with Accordion Layout issue

  1. #1

    [CLOSED] Expanded West Region Panel with Accordion Layout issue

    Hi,

    This is how it was in Ext 2.5.3:



    When west panel was collapsed and expanded by clicking the vertical panel title, the accordion layout was working fine.

    This is what is happening in Ext 3.0.0 (Ext JS 5.0.1.1255)



    The whole panel is collapsing when switching panels in accordion layout. (The grid is fine... I had to remove some information there)

    Thank you,
    Attached Thumbnails Click image for larger version. 

Name:	accordion-expanded-extjs4.png 
Views:	20 
Size:	8.1 KB 
ID:	18571   Click image for larger version. 

Name:	accordion-expanded-extjs5.png 
Views:	20 
Size:	10.1 KB 
ID:	18581  
    Last edited by Daniil; Jan 14, 2015 at 11:45 AM. Reason: [CLOSED] [#617]
  2. #2
    Please post a complete (but simplified) code sample demonstrating how to reproduce the issue.
  3. #3
    Hi Raphael,

    That's the markup (no explicit code involved):

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    	<title>Ext.NET v3 Example</title>
    </head>
    <body>
    	<form runat="server">
    		<ext:ResourceManager
    			runat="server"
    			Theme="Gray"
    			ScriptMode="Release" />
    
    		<ext:Viewport runat="server" Layout="FitLayout">
    
    			<Items>
    
    				<ext:Container
    					runat="server"
    					Layout="BorderLayout">
    					<Items>
    						<ext:Panel
    							runat="server"
    							Region="West"
    							Layout="AccordionLayout"
    							Title="Now click this header..."
    							Width="300"
    							Border="false"
    							Split="true"
    							Collapsible="true"
    							Header="false">
    							<Items>
    								<ext:TreePanel
    									runat="server"
    									Border="false"
    									Title="Collapse West Panel (double click on splitter)"
    									OverflowY="Auto"
    									RootVisible="true"
    									Frame="false"
    									Lines="false"
    									UseArrows="true"
    									Animate="false"
    									Cls="documents-tree">
    									<Store>
    										<ext:TreeStore
    											runat="server"
    											ShowWarningOnFailure="false">
    											<Proxy>
    												<ext:AjaxProxy
    													Url="GetFolders.ashx"
    													Timeout="99999">
    												</ext:AjaxProxy>
    											</Proxy>
    										</ext:TreeStore>
    									</Store>
    									<Root>
    										<ext:Node
    											NodeID="0"
    											Text="Data Sources"
    											IconCls=""
    											Expanded="false" />
    									</Root>
    								</ext:TreePanel>
    
    								<ext:TreePanel
    									runat="server"
    									Border="false"
    									Region="West"
    									Title="Click me when west panel header is colapsed"
    									OverflowY="Auto"
    									RootVisible="true"
    									Frame="false"
    									Lines="false"
    									UseArrows="true"
    									Animate="false">
    
    								</ext:TreePanel>
    							</Items>
    						</ext:Panel>
    
    						<ext:Panel
    							runat="server"
    							Frame="false"
    							Region="Center"
    							Header="false"
    							Layout="FitLayout"
    							Border="true">
    							<BottomBar>
    								<ext:Toolbar runat="server">
    									<Items>
    										<ext:Button runat="server" Text="Placeholder" />
    									</Items>
    								</ext:Toolbar>
    							</BottomBar>
    						</ext:Panel>
    					</Items>
    				</ext:Container>
    			</Items>
    		</ext:Viewport>
    	</form>
    </body>
    </html>
  4. #4
    Hi Matt, i am gonna investigate it right away.
  5. #5
    Hi Matt, i got the sample down to bare minimum

    Test case:

    • Double click on splitter (West region is collapsed)
    • Expand West region by clicking its header
    • Expand Panel 2 (Layout Error)
    • Expand Panel 1 (Layout Error)


    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager Theme="Gray" ScriptMode="Debug" runat="server" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:Container Layout="BorderLayout" runat="server">
                        <Items>
                            <ext:Panel Region="West" Layout="AccordionLayout" Title="West" Width="300" Border="false" Split="true" Collapsible="true" Header="false" runat="server">
                                <Items>
                                    <ext:Panel Border="false" Title="Panel 1" Html="Ext.Net 1" runat="server" />
                                    <ext:Panel Border="false" Title="Panel 2" Html="Ext.Net 2" runat="server" />
                                </Items>
                            </ext:Panel>
                            <ext:Panel Region="Center" Header="false" Layout="FitLayout" Border="true" Html="Content" runat="server" />
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>


    As far i can see it has been fixed on Ext.Js 5.1. I proceeded through the steps presented above on http://dev.sencha.com/ext/5.1.0/exam...tal/index.html, and everything worked as expected. It's possible to reproduce the issue on the Ext.Net equivalent example: https://examples3.ext.net/#/Portal/Basic/Simple/.

    Matt, Ext.Net team is currently incorporating Ext.Js 5.1 and it may be available next week.

    Daniil, can you try to reproduce the issue presented above on the newest version?
    Last edited by RaphaelSaldanha; Jan 10, 2015 at 5:25 AM.
  6. #6
    Thank you Raphael for reproducing the problem in a simply way.

    At the moment I am on very tight deadline... I bet it is going to difficult to explain my supervisors why I have decided to move to Ext.3.0 and not made a big progress last week.
    I am sure it will payoff soon as it is clear that ExtJS5 despite some issues is much faster and looks better (noticed that in IE).

    Any ETA on release ExtJS 5.1.0 in Ext.Net ?

    Best Regards,
  7. #7
    Matt, i would like to suggest to set west panel Floatable="false" and TitleCollapse="true". It will prevent the user from viewing the problem.

    Any ETA on release ExtJS 5.1.0 in Ext.Net ?
    I am not in position to say so, but i am 99% sure that it's gonna be next week, according to some conversations with Daniil.

    Ext.Net Team and the community are working hard to address all the issues found during migration from version 2.x to version 3.x. This version will be much more stable.

    I am sure it will payoff soon as it is clear that ExtJS5 despite some issues is much faster and looks better (noticed that in IE).
    It also have new features, such:
    • TABLET SUPPORT
    • NEW THEMES
    • GRID WIDGETS
    • TOUCH CHARTS
    • MVVM ARCHITECTURE
    • 2 WAY DATA BINDING
    • ROUTING
    • SESSION MANAGEMENT
    Last edited by RaphaelSaldanha; Jan 10, 2015 at 2:43 PM.
  8. #8
    Thank You Raphael !

    The settings Floatable="false" and TitleCollapse="true" is nice workaround. We loose the feature but at least the "issue" is not visible.

    Thanks for the list. That is a nice list of new features to argue about :) Hope they will agree with my vision to move forward to the new version.
    Last edited by matt; Jan 11, 2015 at 3:00 PM.
  9. #9
    You're welcome.


    In addition, if you use charting you will see a lot of new cool features and performance improvements as well.

    Let us know if you need further assistance.
  10. #10
    I confirm that this issue has been fixed in the SVN trunk. It will go to v3.1.0 beta release.
    Last edited by RaphaelSaldanha; Jan 14, 2015 at 11:37 AM.

Similar Threads

  1. Replies: 2
    Last Post: Jan 24, 2013, 5:22 AM
  2. Replies: 8
    Last Post: Jan 24, 2013, 5:21 AM
  3. Replies: 2
    Last Post: Jun 14, 2012, 11:30 AM
  4. [CLOSED] A minor flaw on panel putting on region "West"
    By cleve in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 08, 2012, 8:34 AM
  5. ExtJs Extender in west region
    By maxdiable in forum 1.x Help
    Replies: 4
    Last Post: Jun 10, 2009, 4:00 AM

Tags for this Thread

Posting Permissions