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

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

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

Thank you!!
I have used VBoxLayout with Flex and now it's ok!!
You can close the thread!

Stefano

Hello! Thanks for your feedback and glad it helped!

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

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

Hello Fabricio!
It's perfect for me!

Thank's again!


Stefano

Hello Stefano!

Glad it was of help, and thanks for the feedback!