[CLOSED] Expand GridPanel when collapse another GridPanel

  1. #1

    [CLOSED] Expand GridPanel when collapse another GridPanel

    Hi guys!
    I have a question:
    I have two GridPanel inside a Panel with AnchorLayout, the first one with AnchorVertical 60 and the second one with Anchor Vertical 40.
    I would like that when I collapse the first one, the second expand at the max vertical size possible inside the Panel.
    Is it possibile??

    Here my code:

    <ext:Panel ID="panelAnalisiAnomaliePerTipo" runat="server" Region="Center" Layout="AnchorLayout" Split="false"
    	Collapsible="false" Border="false" Hidden="false" AutoScroll="false" MarginSpec="84 0 0 0">
    	<Items>
    		   <ext:GridPanel ID="GridPanelAnalisiAnomaliePerTipo" runat="server" Title="Analisi anomalie per tipo" Stateful="true" Collapsible ="true"
    				BodyPadding="0" AnchorHorizontal="100%" AnchorVertical="60%"
    				Resizable = "false">    
    				<Store>                          
    					<ext:Store ID="StoreAnalisiAnomaliePerTipo" runat="server" PageSize="20" OnReadData="StoreAnalisiAnomaliePerTipo_RefreshData">
    						<Model>
    							<ext:Model ID="ModelAnalisiAnomaliePerTipo" runat="server" IDProperty="IDVEICOLO">
    								<Fields>                                                
    									<ext:ModelField Name="ID_ANOMALIA" />
    									<ext:ModelField Name="IDVEICOLO" />                                      
    								  </Fields>
    							</ext:Model>
    						</Model>
    					</ext:Store>
    				</Store>
    		<ColumnModel ID="ColumnModelAnalisiAnomaliePerTipo" runat="server">
    			<Columns>
    					<ext:Column ID="ColumnIDVEICOLO" runat="server" Text="IDVEICOLO" DataIndex="IDVEICOLO" Width="100" Hidden = "true" >                                        
    					</ext:Column>
    					<ext:Column ID="ColumnID_ANOMALIA" runat="server" Text="ID_ANOMALIA" DataIndex="ID_ANOMALIA" Width="100" Hidden = "true" >                                        
    					</ext:Column>
    			</Columns> 
    		</ColumnModel>
    								
    		<Plugins>
    			<ext:GridFilters ID="GridFiltersAnalisiAnomaliePerTipo" runat="server">
    			</ext:GridFilters>
    		</Plugins>
    
    		<SelectionModel>
    			<ext:RowSelectionModel ID="RowSelectionModelGridPanelAnalisiAnomaliePerTipo" runat="server" Mode="Single" >                                
    			</ext:RowSelectionModel>
    		</SelectionModel>
    
    		<DirectEvents>
    			<ItemClick OnEvent="GridPanelAnomalieVeicolo_ItemClick" Before="Ext.net.Mask.show({ el: #{GridPanelDettaglioAnomalie} });">
    				<ExtraParams>
    					<ext:Parameter Name="ID_ANOMALIA" Value="record.data.ID_ANOMALIA" Mode="Raw" />
    					<ext:Parameter Name="IDVEICOLO" Value="record.data.IDVEICOLO" Mode="Raw" />                                    
    				</ExtraParams>
    			</ItemClick>
    		</DirectEvents>
    
    		<BottomBar>
    			<ext:PagingToolbar ID="PagingToolbar2" 
    				runat="server" 
    				DisplayInfo="true"
    				DisplayMsg="Numero di record {0} - {1} of {2}">                           
    
    				<Items>
    					<ext:Button ID="btnResetState" Width="140" runat="server" Text="Riconfigura" Icon="ArrowRotateAnticlockwise" Disabled = "false">
    						<DirectEvents>
    							<Click OnEvent="cmdReconfigureGridPanelState_DirectClick" Buffer="250">
    								<EventMask ShowMask="true" Msg="Loading..." CustomTarget="#{GridPanelAnalisiAnomaliePerTipo}"/>
    							</Click>
    						</DirectEvents>  
    						<Listeners>
    							<AfterRender Handler="SaveStateStore(#{StoreAnalisiAnomaliePerTipo})" Delay="10"></AfterRender>                                        
    						</Listeners>
    				   </ext:Button> 
    
    				   <ext:Button ID="ButtonToExcel" Hidden="true" runat="server" Text="Excel" Icon="PageExcel" OnClientClick="ExportToExcel(#{cmbFlotta}.getRawValue(), #{cmbDeposito}.getRawValue());" >                    
    					</ext:Button>
    				</Items>
    			</ext:PagingToolbar>
    		</BottomBar>
        
    	</ext:GridPanel>        
                                
                                
    	<ext:GridPanel ID="GridPanelDettaglioAnomalie" runat="server" Title="Dettaglio anomalie" Hidden="false" Collapsible ="true"
    		AnchorHorizontal="100%" AnchorVertical="40%" Stateful="true"                          
    		BodyPadding="0"
    		Resizable = "false">    
    		<Store>                          
    			<ext:Store ID="StoreDettaglioAnomalie" runat="server" PageSize="10">
    				<Model>
    					<ext:Model ID="ModelDettaglioAnomalie" runat="server" IDProperty="ID">
    						<Fields>
    							<ext:ModelField Name="IDANOMALIA" />
    							<ext:ModelField Name="CODICE_ANOMALIA" />                                         
    						  </Fields>
    					</ext:Model>
    				</Model>
    			</ext:Store>
    		</Store>
    		<ColumnModel ID="ColumnModel3" runat="server">
    			<Columns>
    				<ext:Column ID="ColumnDETTAGLIO_IDANOMALIA" runat="server" Text="IDANOMALIA" DataIndex="IDANOMALIA" Width="100" Hidden = "true" >                                        
    				</ext:Column>  
    			</Columns> 
    		</ColumnModel>
                            
                            
    		<Plugins>
    			<ext:GridFilters ID="GridFiltersDettaglioAnomalie" runat="server">
    			</ext:GridFilters>
    		</Plugins>
    
    		<SelectionModel>
    			<ext:CheckboxSelectionModel ID="CheckboxSelectionModelEventiLOC" runat="server" Mode="Simple" />                            
    		</SelectionModel> 
    
    	</ext:GridPanel>                
    	</Items>
    </ext:Panel>
    Thank you very much!!

    Stefano
    Last edited by fabricio.murta; Feb 01, 2017 at 5:59 PM.
  2. #2
    Hello Stefano!

    Your code does not run in our side because at least some code behind events requirements that weren't provided. I'd suggest you drawing an example from a grid in examples explorer, maybe based from the simple array grid example.

    Maybe instead of using the anchor layout, you could just use a VBoxLayout with stretch (see this example) and give the panels a Flex value of 6 and 4, respectively?

    Hope this helps. It would help us understand your problem if you provided an example following these guidelines:
    Tips for creating simplified code samples
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you!!
    I have used VBoxLayout with Flex and now it's ok!!
    You can close the thread!

    Stefano
  4. #4
    Hello! Thanks for your feedback and glad it helped!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,
    is it possibile to allow the user resize manually (only vertically resize) both the grid?
    I would like that when resize for example the first one, the second one resize togheter.
    Is it possible?
    Thank's again!

    Stefano
  6. #6
    Hello Stefano!

    Yes, that's a feature inherent from the layout and panels. Take a look on this example with HBox layout. You can do it pretty much the same with VBox layout. From that example, you probably don't want the expand/collapse handlers, but just the resizable ones.

    Hope this helps!

    EDIT: This example: VBox layout - Split panels
  7. #7
    Hello Fabricio!
    It's perfect for me!

    Thank's again!


    Stefano
  8. #8
    Hello Stefano!

    Glad it was of help, and thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: May 06, 2016, 5:03 AM
  2. Replies: 5
    Last Post: May 12, 2014, 4:05 PM
  3. Replies: 6
    Last Post: Dec 24, 2012, 3:32 PM
  4. [CLOSED] Gridpanel GroupingView Expand/Collapse Event
    By deejayns in forum 1.x Premium Help
    Replies: 1
    Last Post: Feb 16, 2011, 10:37 AM
  5. why is GridPanel collapse and expand unable ?
    By netcooliteuser in forum 1.x Help
    Replies: 7
    Last Post: Sep 09, 2010, 5:57 PM

Tags for this Thread

Posting Permissions