[CLOSED] Page layout using layout controls.

  1. #1

    [CLOSED] Page layout using layout controls.

    Please tell me how can i get the second LayoutRow to fill the size of the entire view after the Panel in the first LayoutRow is Collasped.

    I am trying have a layout that has a panel at the top that contain a name and description of a report and second Panel below that contains a filter form that should be in a formgroup to make it collapsible and a gridpanel below the second panel that takes up all the space below the second panel when its collasped or expanded.

    <ext:Viewport ID="Viewport1" Layout="Fit" runat="server">
        <Content>
            <ext:BorderLayout runat="server">
                <North Collapsible="false"   Split="false">               
                    <ext:Panel  Title="Description" Height="80" ID="Panel1" runat="server">
                        <Items>
                        </Items>
                    </ext:Panel>
                </North>
                <Center>
                    <ext:Panel runat="server">
                        <Content>
                        <ext:RowLayout runat="server"  RowHeight="0.2">
                        <Rows>
                        <ext:LayoutRow  RowHeight="0.2">
                              <ext:Panel runat="server" Collapsible="true"><Items>                        
                              <ext:FitLayout  runat="server">
                                <Items>
                                    <ext:Panel Title="Filter" Height="80" ID="Panel2" runat="server">
                                         <Content>
                                            <UCReportSummaryFilterView:ReportSummaryFilterView ID="ReportSummaryFilterView" runat="server"/>
                                         </Content>
                                    </ext:Panel>
                                </Items>
                              </ext:FitLayout>
                              </Items></ext:Panel> 
                           </ext:LayoutRow>
                           <ext:LayoutRow  RowHeight="0.8">
                           <ext:Panel ID="Panel3"  runat="server"><Items>
                                   <ext:FitLayout ID="FitLayout1" runat="server">
                                    <Items>
                                    <ext:GridPanel ID="GridPanelReportSummary" runat="server"  StripeRows="true"  Header="false" AutoExpandColumn="columnReportName" StoreID="ReportSummaryStore" Border="false">
                                        <ColumnModel ID="ColumnModel1" runat="server">
                                            <Columns>
                                                    <ext:Column ColumnID="columnReportName" DataIndex="ReportName" Header="Report Name">
                                                         <Renderer  Fn="ReportSummaryGrid.RenderColor" />
                                                    </ext:Column>
                                                    <ext:Column DataIndex="DateAssigned"  ColumnID="columnDateAssigned"  Header="Date Assigned"  Align="Left" Groupable="true"/>
                                                    <ext:Column DataIndex="Period" ColumnID="columnPeriod"  Header="Period" Align="Left" Groupable="true"/>
                                                    <ext:Column DataIndex="Status" ColumnID="columnStatus"  Header="Status" Align="Left" Groupable="true" />
                                                    <ext:Column DataIndex="Count" ColumnID="columnCount"   Header="Count" Align="Right" Groupable="true"/>
                                                    <ext:Column DataIndex="ProcessName" ColumnID="columnBusinessProcess"  Header="Business Process" Groupable="true"/>
                                                    <ext:Column DataIndex="ReportType" ColumnID="columnReportType"  Header="Report Type" Align="Left" Groupable="true"/>
                                            </Columns>
                                          </ColumnModel>
                                         
                                          <SelectionModel>
                                              <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                                          </SelectionModel>
                                         
                                           <View>
                                                <ext:GroupingView 
                                                    ID="GroupingView1"
                                                    HideGroupedColumn="false"
                                                    runat="server"
                                                    ForceFit="true"
                                                    StartCollapsed="true"
                                                    EnableRowBody="true">
                                                </ext:GroupingView>
                                            </View>
                                                                                                                                                       
                                            <BottomBar>
                                                <ext:PagingToolBar
                                                ID="PagingToolBarReportSummary"
                                                runat="server"
                                                PageSize="100"
                                                StoreID="ReportSummaryStore"
                                                DisplayInfo="true"
                                                 />
                                            </BottomBar>
                                           
                                            <Listeners>
                                                <CellClick Fn="ReportSummaryGrid.CellClick" />
                                            </Listeners>      
                   
                                            <DirectEvents>
                                                <CellClick OnEvent="ReportSummaryItem_Clicked" Failure="Ext.MessageBox.alert('Load failed', result.errorMessage);" Success="">
                                                    <ExtraParams>
                                                            <ext:Parameter Name="GridPanelReportSummaryData" Value="Ext.encode(#{GridPanelReportSummary}.getRowsValues({selectedOnly:true}))" Mode="Raw"></ext:Parameter>
                                                    </ExtraParams>
                                                </CellClick>
                                            </DirectEvents> 
                                           
                                            <LoadMask  ShowMask ="true"  /> 
                                     </ext:GridPanel>
                                     </Items>
                                     </ext:FitLayout>
                                    </Items>
                                    </ext:Panel>
                           </ext:LayoutRow>
                         </Rows>
                          </ext:RowLayout>   
                        </Content>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Content>
    </ext:Viewport>
  2. #2

    RE: [CLOSED] Page layout using layout controls.

    Hi Again,

    The layout below shows exactly what i am attempting to achieve. The only problem is i can't get the GridPanel to fill the white space at the bottom of the page.

    Please i am requesting you soonest reply as i am trying to finish a prototype for tomorrow.

    <ext:Viewport ID="Viewport1" Layout="Fit" runat="server">
        <Content>
            <ext:BorderLayout runat="server">
                <North Collapsible="false"   Split="false">               
                    <ext:Panel  Title="Description" Height="80" ID="Panel1" runat="server">
                        <Items>
                        </Items>
                    </ext:Panel>
                </North>
                <Center>
                    <ext:Panel runat="server">
                        <Content>
                       
                           <ext:Panel FormGroup="true" Title="Filter" Height="80" ID="Panel2" runat="server">
                                 <Content>
                                    <UCReportSummaryFilterView:ReportSummaryFilterView ID="ReportSummaryFilterView" runat="server"/>
                                 </Content>
                            </ext:Panel>    
    
                           <ext:Panel ID="Panel3"  runat="server">
                           <Items>
                                   <ext:FitLayout ID="FitLayout1" runat="server">
                                    <Items>
                                    <ext:GridPanel ID="GridPanelReportSummary" runat="server"  StripeRows="true"  Header="false" AutoExpandColumn="columnReportName" StoreID="ReportSummaryStore" Border="false">
                                        <ColumnModel ID="ColumnModel1" runat="server">
                                            <Columns>
                                                    <ext:Column ColumnID="columnReportName" DataIndex="ReportName" Header="Report Name">
                                                         <Renderer  Fn="ReportSummaryGrid.RenderColor" />
                                                    </ext:Column>
                                                    <ext:Column DataIndex="DateAssigned"  ColumnID="columnDateAssigned"  Header="Date Assigned"  Align="Left" Groupable="true"/>
                                                    <ext:Column DataIndex="Period" ColumnID="columnPeriod"  Header="Period" Align="Left" Groupable="true"/>
                                                    <ext:Column DataIndex="Status" ColumnID="columnStatus"  Header="Status" Align="Left" Groupable="true" />
                                                    <ext:Column DataIndex="Count" ColumnID="columnCount"   Header="Count" Align="Right" Groupable="true"/>
                                                    <ext:Column DataIndex="ProcessName" ColumnID="columnBusinessProcess"  Header="Business Process" Groupable="true"/>
                                                    <ext:Column DataIndex="ReportType" ColumnID="columnReportType"  Header="Report Type" Align="Left" Groupable="true"/>
                                            </Columns>
                                          </ColumnModel>
                                         
                                          <SelectionModel>
                                              <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                                          </SelectionModel>
                                         
                                           <View>
                                                <ext:GroupingView 
                                                    ID="GroupingView1"
                                                    HideGroupedColumn="false"
                                                    runat="server"
                                                    ForceFit="true"
                                                    StartCollapsed="true"
                                                    EnableRowBody="true">
                                                </ext:GroupingView>
                                            </View>
                                                                                                                                                       
                                            <BottomBar>
                                                <ext:PagingToolBar
                                                ID="PagingToolBarReportSummary"
                                                runat="server"
                                                PageSize="100"
                                                StoreID="ReportSummaryStore"
                                                DisplayInfo="true"
                                                 />
                                            </BottomBar>
                                           
                                            <Listeners>
                                                <CellClick Fn="ReportSummaryGrid.CellClick" />
                                            </Listeners>      
                   
                                            <DirectEvents>
                                                <CellClick OnEvent="ReportSummaryItem_Clicked" Failure="Ext.MessageBox.alert('Load failed', result.errorMessage);" Success="">
                                                    <ExtraParams>
                                                            <ext:Parameter Name="GridPanelReportSummaryData" Value="Ext.encode(#{GridPanelReportSummary}.getRowsValues({selectedOnly:true}))" Mode="Raw"></ext:Parameter>
                                                    </ExtraParams>
                                                </CellClick>
                                            </DirectEvents> 
                                           
                                            <LoadMask  ShowMask ="true"  /> 
                                     </ext:GridPanel>
                                     </Items>
                                     </ext:FitLayout>
                            </Items>
                            </ext:Panel>
                       
                        </Content>
                    </ext:Panel>
    
               
                </Center>
            </ext:BorderLayout>
        </Content>
    </ext:Viewport>
  3. #3

    RE: [CLOSED] Page layout using layout controls.

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store runat="server" ID="ReportSummaryStore">
            <Reader>
                <ext:JsonReader>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:Viewport ID="Viewport1" Layout="Fit" runat="server">
            <Content>
                <ext:BorderLayout runat="server">
                    <North Collapsible="false" Split="false">
                        <ext:Panel Title="Description" Height="80" ID="Panel1" runat="server">
                            <Items>
                            </Items>
                        </ext:Panel>
                    </North>
                    <Center>
                        <ext:Panel ID="CenterRegion" runat="server" Layout="VBox">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:Panel FormGroup="true" Title="Filter" Height="80" ID="Panel2" runat="server"
                                    BodyStyle="background-color:silver;">
                                    <Content>
                                        Content
                                    </Content>
                                    <Listeners>
                                        <Collapse Handler="#{CenterRegion}.doLayout();" />
                                        <Expand Handler="#{CenterRegion}.doLayout();" />
                                    </Listeners>
                                </ext:Panel>
                                <ext:GridPanel ID="GridPanelReportSummary" runat="server" StripeRows="true" Header="false"
                                    AutoExpandColumn="columnReportName" StoreID="ReportSummaryStore" Border="false"
                                    Flex="1">
                                    <ColumnModel ID="ColumnModel1" runat="server">
                                        <Columns>
                                            <ext:Column ColumnID="columnReportName" DataIndex="ReportName" Header="Report Name">
                                            </ext:Column>
                                            <ext:Column DataIndex="DateAssigned" ColumnID="columnDateAssigned" Header="Date Assigned"
                                                Align="Left" Groupable="true" />
                                            <ext:Column DataIndex="Period" ColumnID="columnPeriod" Header="Period" Align="Left"
                                                Groupable="true" />
                                            <ext:Column DataIndex="Status" ColumnID="columnStatus" Header="Status" Align="Left"
                                                Groupable="true" />
                                            <ext:Column DataIndex="Count" ColumnID="columnCount" Header="Count" Align="Right"
                                                Groupable="true" />
                                            <ext:Column DataIndex="ProcessName" ColumnID="columnBusinessProcess" Header="Business Process"
                                                Groupable="true" />
                                            <ext:Column DataIndex="ReportType" ColumnID="columnReportType" Header="Report Type"
                                                Align="Left" Groupable="true" />
                                        </Columns>
                                    </ColumnModel>
                                    <SelectionModel>
                                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                                    </SelectionModel>
                                    <View>
                                        <ext:GroupingView ID="GroupingView1" HideGroupedColumn="false" runat="server" ForceFit="true"
                                            StartCollapsed="true" EnableRowBody="true">
                                        </ext:GroupingView>
                                    </View>
                                    <BottomBar>
                                        <ext:PagingToolbar ID="PagingToolBarReportSummary" runat="server" PageSize="100"
                                            StoreID="ReportSummaryStore" DisplayInfo="true" />
                                    </BottomBar>
                                    <LoadMask ShowMask="true" />
                                </ext:GridPanel>
                            </Items>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Content>
        </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4

    RE: [CLOSED] Page layout using layout controls.

    Thanks alot Vladimir, please mark as solved.
  5. #5

    RE: [CLOSED] Page layout using layout controls.

    Hi,

    This has been broken in the latest update from SVN. Please can you offer some help. geoffrey.mcgill suggested i changed the layout to what you see below, but it still does not work. My build is currently broken, please offer some assistance.

    <ext:Viewport ID="Viewport1" Layout="border" runat="server">
            <Items> 
                <ext:Panel Title="Description" Region="North" Height="75" ID="PanelHeader" runat="server">                        
                    <Items>                        
                    </Items>                    
                </ext:Panel> 
                                   
                <ext:Panel ID="CenterRegion" Region="Center" runat="server" PaddingSummary="5 5 5 5" Layout="VBox">                        
                    <LayoutConfig>                            
                        <ext:VBoxLayoutConfig Align="Stretch" />                        
                    </LayoutConfig>                        
                    <Items>                            
                        <ext:Panel FormGroup="true" Title="Filter" Height="120" ID="Panel2"  runat="server">
                            <Content>
                                <UCReportSummaryFilterView:ReportSummaryFilterView ID="ReportSummaryFilterView" runat="server" />                             
                            </Content>                                
                        </ext:Panel>                           
                        <ext:GridPanel ID="GridPanelReportSummary" runat="server" StripeRows="true" Header="false" AutoDoLayout="true" AutoExpandColumn="columnReportName" StoreID="ReportSummaryStore" Border="false" Flex="1">
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column ColumnID="columnReportName" DataIndex="ReportName" Header="Report Name" >
                                        <Renderer  Fn="ReportSummaryGrid.RenderColor" />
                                    </ext:Column>
                                    <ext:Column DataIndex="DateAssigned" ColumnID="columnDateAssigned" Header="Date Assigned" Align="Left" Groupable="true" /> 
                                    <ext:Column DataIndex="Period" ColumnID="columnPeriod" Header="Period" Align="Left" Groupable="true" />
                                    <ext:Column DataIndex="Status" ColumnID="columnStatus" Header="Status" Align="Left" Groupable="true" /> 
                                    <ext:Column DataIndex="Count" ColumnID="columnCount" Header="Count" Align="Right" Groupable="true" /> 
                                    <ext:Column DataIndex="ProcessName" ColumnID="columnBusinessProcess" Header="Business Process" Groupable="true" />
                                    <ext:Column DataIndex="ReportType" ColumnID="columnReportType" Header="Report Type" Align="Left" Groupable="true" /> 
                                </Columns> 
                                </ColumnModel>
                                
                                    <SelectionModel>
                                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                                    </SelectionModel>
                                    
                                    <View>                                            
                                    <ext:GroupingView ID="GroupingView1" 
                                    HideGroupedColumn="false" 
                                    runat="server" 
                                    ForceFit="true" 
                                    StartCollapsed="true" 
                                    EnableRowBody="true" />
                                    </View>
                                    
                                    <BottomBar>
                                        <ext:PagingToolbar 
                                         ID="PagingToolBarReportSummary" 
                                          runat="server" PageSize="100"
                                            StoreID="ReportSummaryStore" DisplayInfo="true" />
                                    </BottomBar>        
                                    
                                                            
                                <Listeners>
                                    <CellClick Fn="ReportSummaryGrid.CellClick" />
                                </Listeners>       
        
                                <DirectEvents>
                                    <CellClick OnEvent="ReportSummaryItem_Clicked" Failure="Ext.MessageBox.alert('Load failed', result.errorMessage);" Success="">
                                        <ExtraParams>
                                                <ext:Parameter Name="GridPanelReportSummaryData" Value="Ext.encode(#{GridPanelReportSummary}.getRowsValues({selectedOnly:true}))" Mode="Raw"></ext:Parameter>
                                        </ExtraParams>
                                    </CellClick>
                                </DirectEvents>  
                                
                                <LoadMask  ShowMask ="true"  />  
                          </ext:GridPanel>
                          
                    </Items>
                </ext:Panel>
           </Items>
    </ext:Viewport>
  6. #6

    RE: [CLOSED] Page layout using layout controls.

    Hi,

    Please see
    http://forums.ext.net/showthread.php?postid=29671.aspx


    In future, it is better create new topic instead posting to the CLOSED topic (just we can miss new posts in the CLOSED topic)

Similar Threads

  1. [CLOSED] layout issue when using RowLayout within column layout
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 11, 2012, 2:40 PM
  2. [CLOSED] VBoxLayout layout does not refresh the layout automatically
    By leon_tang in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 23, 2011, 1:52 PM
  3. [CLOSED] vbox layout inside column layout
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 2:44 PM
  4. Replies: 1
    Last Post: Oct 28, 2010, 7:19 AM
  5. [CLOSED] [1.0] How to auto layout the controls in a tab
    By juane66 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 18, 2010, 9:24 PM

Posting Permissions