[CLOSED] GridPanel fit problem

  1. #1

    [CLOSED] GridPanel fit problem

    Good morning,
    following the ViewPort example I have a master page that contains a ViewPort; inside the ViewPort, in the "Center" section, I have a TabPanel in which I open my detail pages.

    
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Content>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <North Margins-Bottom="4">
                        <ext:Panel ID="Panel1" runat="server" Height="25" Border="false">
                            <Content>
                                <ext:Toolbar ID="tHeader" runat="server">
                                    <Items>
                                        <ext:Label Cls="PageTitle" ID="lblTitle" runat="server" Html="&nbsp;&nbsp;YYYY Exception Data Management Tool" Icon="Application" />
                                        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                                        <ext:Label ID="btnUser" runat="server" Icon="StatusOnline" Cls="ClassicLabel" />
                                        <ext:ToolbarFill ID="ToolbarFill2" runat="server" />
                                        <ext:Button ID="cmdEsci" runat="server" Icon="LockGo" Text="Logout">
                                            <DirectEvents>
                                                <Click OnEvent="cmdEsci_Click" />
                                            </DirectEvents>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </Content>
                        </ext:Panel>
                    </North>
                    <West Collapsible="true" Split="true" CollapseMode="Mini" MarginsSummary="0 0 4 4">
                        <ext:Panel ID="West" runat="server" Title="Menu" Cls="ExplorerTitle" Width="200">
                            <Content>
                                <ext:AccordionLayout ID="wmAccordion1" runat="server" Animate="true">
                                    <Content>
                                        <ext:Panel ID="pAdmin" runat="server" Border="false" Collapsed="true" Title="Amministrazione">
                                            <Content>
                                                <ext:FitLayout ID="flAdmin" runat="server">
                                                    <Content>
                                                        <ext:MenuPanel ID="mpAdmin" runat="server" Border="false" SaveSelection="false" Cls="white-menu">
                                                            <Menu runat="server">
                                                                <Items>
                                                                    <ext:MenuItem ID="mnUser" runat="server" Text="Utenti" Icon="User">
                                                                        <Listeners>
                                                                            <Click Handler="addTab(#{tpMain}, 'tpUser', 'Utenti', 'Controls/Details/User.aspx');" />
                                                                        </Listeners>
                                                                    </ext:MenuItem>
                                                                </Items>
                                                            </Menu>
                                                        </ext:MenuPanel>
                                                    </Content>
                                                </ext:FitLayout>
                                            </Content>
                                        </ext:Panel>
                                        <ext:Panel ID="pManage" runat="server" Border="false" Title="Gestione">
                                            <Content>
                                                <ext:FitLayout ID="flManage" runat="server">
                                                    <Content>
                                                        <ext:MenuPanel ID="mpManage" runat="server" Border="false" SaveSelection="false" Cls="white-menu">
                                                            <Menu runat="server">
                                                                <Items>
                                                                    <ext:MenuItem ID="mnIndirizzi" runat="server" Text="Indirizzi" Icon="Brick" >
                                                                        <Listeners>
                                                                            <Click Handler="#{tpMain}.body.mask('Lettura in corso...', 'x-mask-loading'); addTab(#{tpMain}, 'tpIndirizzi', 'Indirizzi', 'Controls/Tables/tbIndirizzi.aspx'); " />        
                                                                        </Listeners>
                                                                    </ext:MenuItem>
                                                                    <ext:MenuItem ID="mnLocalita" runat="server" Text="Località" Icon="Brick" >
                                                                        <Listeners>
                                                                            <Click Handler="#{tpMain}.body.mask('Lettura in corso...', 'x-mask-loading'); addTab(#{tpMain}, 'tpLocalita', 'Località', 'Controls/Tables/tbLocalita.aspx'); " />        
                                                                        </Listeners>
                                                                    </ext:MenuItem>
                                                                    <ext:MenuItem ID="MenuItem1" runat="server" Text="Esportazione" Icon="ArrowJoin">
                                                                        <Listeners>
                                                                            <Click Handler="addTab(#{tpMain}, 'tpExport', 'Esportazione', 'Controls/tbExport.aspx'); " />        
                                                                        </Listeners>
                                                                    </ext:MenuItem>
                                                                </Items>
                                                            </Menu>
                                                        </ext:MenuPanel>
                                                    </Content>
                                                </ext:FitLayout>
                                            </Content>
                                        </ext:Panel>
                                    </Content>
                                </ext:AccordionLayout>
                            </Content>
                        </ext:Panel>
                    </West>
                    <Center MarginsSummary="0 0 4 0">
                        <ext:TabPanel ID="tpMain" 
                                      runat="server" 
                                      MonitorResize="true"
                                      EnableTabScroll="true" 
                                      IDMode="Explicit">
                            <Items>
                                <ext:Panel ID="Tab1" 
                                           runat="server" Title="Home" 
                                           Icon="ApplicationForm" 
                                           MonitorResize="true"
                                           Border="false" 
                                           Frame="false">
                                           
                                    <AutoLoad Url="~/Controls/Home/Home.aspx" Mode="IFrame" ShowMask="true" Timeout="500" MaskMsg="Loading 'Home'..." />
                                </ext:Panel>
                            </Items>
                            <Plugins>
                                <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
                            </Plugins>
                        </ext:TabPanel>
                    </Center>                
                </ext:BorderLayout>
            </Content>
        </ext:ViewPort>
    Each detail page contains a Panel, a FitLayout and a GridPanel with his ColumnModel, Store, etc.

    
            <ext:Panel ID="mainPanel" 
                       runat="server" 
                       Layout="FitLayout"
                       Border="false" 
                       Frame="false" 
                       MonitorResize="true">
                <Content>
                    <ext:FitLayout ID="flDetail" runat="server" >
                        <Content>
                            <ext:GridPanel  
                                ID="grdDetail" 
                                runat="server" 
                                StoreID="stDS" 
                                StripeRows="true"
                                TrackMouseOver="true"
                                MaskDisabled="false"
                                ClearEditorFilter="true"
                                Border="false" 
                                Layout="FitLayout"
                                MinHeight="300"
                                MaxHeight="1000"
                                Height="528" 
                                MonitorWindowResize="true"
                                MonitorResize="true">
                                <ColumnModel ID="cmDetail" runat="server">
                                    <Columns>
                                        <ext:Column ColumnID="IndirizziId" DataIndex="IndirizziId" Hidden="true" Width="0" Header="" Hideable="false" />
                                        <ext:Column DataIndex="CD_REG" Header="CD_REG" Hidden="true" Hideable="true">
                                            <%--<Renderer Fn="NotEditable" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="CD_PV" Header="CD_PV" Hidden="true" Hideable="true">
                                            <%--<Renderer Fn="NotEditable" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="CD_COM" Header="CD_COM" Hidden="true" Hideable="true">
                                            <%--<Renderer Fn="NotEditable" />--%>                                    
                                        </ext:Column>
                                        <ext:Column DataIndex="CD_FRAZ" Header="CD_FRAZ" Hidden="true" Hideable="true">
                                            <%--<Renderer Fn="NotEditable" />--%>                                    
                                        </ext:Column>
                                        <ext:Column DataIndex="COMUNE" Header="COMUNE" Hideable="false">
                                            <%--<Renderer Fn="Mandatory" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="FRAZIONE" Header="FRAZIONE" Hideable="false">
                                            <%--<Renderer Fn="NotMandatory" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="SIGLA_PV" Header="SIGLA PV" Hideable="false" Width="80">
                                            <%--<Renderer Fn="Mandatory" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="PV" Header="PROVINCIA" Hideable="false">
                                            <%--<Renderer Fn="NotMandatory" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="DUG" Header="DUG" Hideable="false">
                                            <%--<Renderer Fn="NotMandatory" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="VIA" Header="VIA" Hideable="false">
                                            <%--<Renderer Fn="Mandatory" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="CIVICO" Header="CIVICO" Hideable="false" Width="80">
                                            <%--<Renderer Fn="Mandatory" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="CAP" Header="CAP" Hideable="false" Width="80">
                                            <%--<Renderer Fn="NotMandatory" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="RAG_SOC" Header="RAG_SOC" Hideable="false">
                                            <%--<Renderer Fn="unCheckStyle" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="SEZ_X" Header="SEZ_X" Hidden="true" Hideable="true">
                                            <%--<Renderer Fn="NotEditable" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="SEZ_Y" Header="SEZ_Y" Hidden="true" Hideable="true">
                                            <%--<Renderer Fn="NotEditable" />--%>
                                        </ext:Column>
                                        <ext:Column DataIndex="DATA" Header="DATA" Hideable="false" Width="100">
                                            <%--<Renderer Fn="NotEditable" />--%>
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="rsmDetail" runat="server" SingleSelect="true">
                                        <DirectEvents>
                                            <RowSelect OnEvent="RowSelect" Buffer="250">
                                                <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="#{pnlPrincipale}" Msg="Lettura.." />
                                                <ExtraParams>
                                                    <ext:Parameter Name="IndirizziId" Value="this.getSelected().id" Mode="Raw" />
                                                </ExtraParams>
                                            </RowSelect>
                                        </DirectEvents>
                                    </ext:RowSelectionModel>                                        
                                </SelectionModel>
                                <BottomBar>
                                    <ext:PagingToolBar ID="ptbDetail" runat="server" PageSize="26" StoreID="stDs" DisplayInfo="true" DisplayMsg="Indirizzi {0} - {1} di {2}" EmptyMsg="Nessun Indirizzo da visualizzare" />
                                </BottomBar>
                                <LoadMask ShowMask="true" Msg="Attendere.." />    
                                <ToolTips>
                                    <ext:ToolTip 
                                        ID="RowTip" 
                                        runat="server" 
                                        Target="={grdDetail.getView().mainBody}"
                                        Delegate=".x-grid3-cell"
                                        DismissDelay="20000"
                                        TrackMouse="true">
                                        <Listeners>
                                            <Show Fn="showTip" />
                                        </Listeners>
                                    </ext:ToolTip>
                                </ToolTips>    
                                <Plugins>
                                    <ext:GridFilters runat="server" ID="gfDetail">
                                        <Filters>
                                            <ext:StringFilter DataIndex="CD_REG" />
                                            <ext:StringFilter DataIndex="CD_PV" />
                                            <ext:StringFilter DataIndex="CD_COM" />
                                            <ext:StringFilter DataIndex="CD_FRAZ" />
                                            <ext:StringFilter DataIndex="COMUNE" />
                                            <ext:StringFilter DataIndex="FRAZIONE" />
                                            <ext:StringFilter DataIndex="SIGLA_PV" />
                                            <ext:StringFilter DataIndex="PV" />
                                            <ext:StringFilter DataIndex="DUG" />
                                            <ext:StringFilter DataIndex="VIA" />
                                            <ext:StringFilter DataIndex="CIVICO" />
                                            <ext:StringFilter DataIndex="CAP" />
                                            <ext:StringFilter DataIndex="RAG_SOC" />
                                            <ext:StringFilter DataIndex="SEZ_X" />
                                            <ext:StringFilter DataIndex="SEZ_Y" />
                                            <ext:StringFilter DataIndex="DATA" />
                                        </Filters>
                                    </ext:GridFilters>
                                </Plugins>  
                                <Listeners>
                                    <ViewReady Handler="parent.tpMain.body.unmask();" />
                                    <%--<SortChange Handler="Ext.net.Mask.show({msg:'Ordinamento..'}); " />
                                    <AfterRender Handler="parent.tpMain.body.unmask();" />--%>
                                </Listeners>                            
                            </ext:GridPanel>
                        </Content>
                    </ext:FitLayout>            
                </Content>
                <BottomBar>
                    <ext:StatusBar runat="server" MonitorResize="true" Height="20" BusyText="Attendere.." BusyIcon="Clock">
                        <Content>
                            <ext:Label ID="lblErrore" Text="" runat="server" Cls="LabelVerde"/>
                        </Content>    
                    </ext:StatusBar>
                </BottomBar>
                <Buttons>
                    <ext:Button ID="cmdAdd" runat="server" Icon="Add">
                        <ToolTips>
                            <ext:ToolTip runat="server" Anchor="right" Target="cmdAdd" DismissDelay="10000" Html="<b>Nuovo</b> record" TrackMouse="true"  />
                        </ToolTips>
                        <Listeners>
                            <Click Handler="Ext.net.Mask.show({msg:'Attendere prego..'}); " />
                        </Listeners>
                        <DirectEvents>
                            <Click OnEvent="btnAdd" />
                        </DirectEvents>                    
                    </ext:Button>
                    <ext:Button ID="cmdUpd" runat="server" Icon="ScriptEdit" Hidden="true">
                        <ToolTips>
                            <ext:ToolTip runat="server" Anchor="right" Target="cmdUpd" DismissDelay="10000" Html="<b>Modifica</b> record" TrackMouse="true"  />
                        </ToolTips>
                        <Listeners>
                            <Click Handler="Ext.net.Mask.show({msg:'Attendere prego..'}); " />
                        </Listeners>
                        <DirectEvents>
                            <Click OnEvent="btnUpd" />
                        </DirectEvents>                    
                    </ext:Button>
                    <ext:Button ID="cmdDel" runat="server" Icon="Delete" Hidden="true">
                        <ToolTips>
                            <ext:ToolTip runat="server" Anchor="right" Target="cmdDel" DismissDelay="10000" Html="<b>Elimina</b> record" TrackMouse="true"  />
                        </ToolTips>
                        <Listeners>
                            <Click Handler="Ext.net.Mask.show({msg:'Attendere prego..'}); " />
                        </Listeners>
                        <DirectEvents>
                            <Click OnEvent="btnDel" />
                        </DirectEvents>                    
                    </ext:Button>
                    <ext:Button ID="cmdView" runat="server" Icon="Vcard" Hidden="true">
                        <ToolTips>
                            <ext:ToolTip runat="server" Anchor="right" Target="cmdView" DismissDelay="10000" Html="<b>Visualizza dettagli</b> record" TrackMouse="true"  />
                        </ToolTips>
                        <Listeners>
                            <Click Handler="Ext.net.Mask.show({msg:'Attendere prego..'}); " />
                        </Listeners>
                        <DirectEvents>
                            <Click OnEvent="btnView" />
                        </DirectEvents>                                    
                    </ext:Button>
                    <ext:Button ID="cmdFilterClear" runat="server" Icon="PluginDelete">
                        <ToolTips>
                            <ext:ToolTip runat="server" Anchor="right" Target="cmdFilterClear" DismissDelay="10000" Html="<b>Elimina filtri</b> applicati (se presenti)" TrackMouse="true"  />
                        </ToolTips>
                        <Listeners>
                            <Click Handler="Ext.net.Mask.show({msg:'Attendere prego..'}); " />
                        </Listeners>
                        <DirectEvents>
                            <Click OnEvent="btnFilterClear" />
                        </DirectEvents>                                                    
                    </ext:Button>
                </Buttons>
            </ext:Panel>
    My problem is that when the browser window is resized by my user, window content (tabpanel, gridpanel, etc.) does not resize himself and appears a vertical scroll bar above the gridpanel.

    Thanks in advance
    regards
    Last edited by Daniil; Jan 24, 2012 at 7:33 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Using a Viewport with Layout="FitLayout" within the Home.aspx as a top level container would be s solution.
  3. #3
    Sorry Danjil but also adding Layout="FitLayout" in master page the result is the same.
    <ext:ViewPort ID="ViewPort1" runat="server" Layout="FitLayout">
    P.S.: home.aspx is an empty page just show an empty page

    See attached images:
    • ExpandedPage is the window at full screen
    • ResizedPage is the resized window (You can see vertical scrollbar)
    • ResizedPage2 is always the resized window with scroll down


    Click image for larger version. 

Name:	ExpandedPage.jpg 
Views:	75 
Size:	106.1 KB 
ID:	3740Click image for larger version. 

Name:	ExpandedPage.jpg 
Views:	75 
Size:	106.1 KB 
ID:	3740Click image for larger version. 

Name:	ResizedPage.jpg 
Views:	75 
Size:	77.6 KB 
ID:	3741Click image for larger version. 

Name:	ResizedPageScrollDown.jpg 
Views:	37 
Size:	73.7 KB 
ID:	3742
  4. #4
    Please simplify your original code sample. I tried to test it, but it was throwing all sorts of Exceptions and errors.

    As well, is the GridPanel necessary to include? does the problem still persist if you replace with just a Panel?
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Problem with drag and drop from gridpanel to gridpanel
    By PoloTheMonk in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 16, 2011, 11:42 AM
  2. [CLOSED] [1.0] Problem with gridpanel
    By juane66 in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 08, 2011, 11:34 AM
  3. [CLOSED] submit gridpanel problem
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 21, 2010, 8:35 AM
  4. [CLOSED] Gridpanel problem/bug?
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 17, 2009, 9:50 AM
  5. Replies: 5
    Last Post: Jun 10, 2009, 5:13 AM

Posting Permissions