GridPanel doesn't resize with browser

  1. #1

    GridPanel doesn't resize with browser

    Hello everyone,

    I'm really having trouble getting my GridPanel to resize when the browser window does. The GridPanel in question is in a content page of a master page that has a ViewPort with West and Center Regions. I've tried countless combinations of Layout="Fit", <ext:FitLayout>, AutoWidth="true", MonitorResize="true" and now I'm stuck. Any help with this is greatly appreciated.

    Content Page:
    <%@ Page Title="" Language="C#" MasterPageFile="~/Application.Master" AutoEventWireup="true" CodeBehind="TechnicalLogs.aspx.cs" Inherits="BASA.Web.TechnicalLogs" %>
    <%@ Register src="UserControls/Modules/LogDetailViewer.ascx" tagname="LogDetailViewer" tagprefix="uc1" %>
     
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="cphMain" runat="server">
    <script type="text/javascript">
        function renderLogLevel(value) {
            return "<div class='gridPanelIcon " + arr[value] + "'>" + value + "</div>";
        }
        </script>
     <%--   <ext:FitLayout ID="ftlTechnicalLogs" runat="server">
            <Items>--%>
                <ext:Panel ID="pnlTechnicalLogs" runat="server" Border="false" Padding="5">
                    <Items>
                        <ext:Panel ID="pnlSearch" runat="server" Layout="Form" Padding="5" BodyBorder="true" Title="Search">
                            <Items>
                                <ext:Panel runat="server" Width="483" BodyBorder="false">
                                    <Content>
                                        <ext:Container ID="Container1" runat="server" Layout="Column" Height="50" Width="500">
                                            <Items>
                                                <ext:Container ID="Container2" runat="server" Layout="Form" ColumnWidth=".5">
                                                    <Items>
                                                        <ext:Label runat="server" ID="lblStart" ForID="dflStart" Text="From" />
                                                        <ext:DateField ID="dflStart" runat="server" Vtype="daterange" Icon="Date" Width="120" LabelAlign="Top">  
                                                        </ext:DateField>
                                                    </Items>
                                                </ext:Container>
                                                <ext:Container ID="Container3" runat="server" Layout="Form" ColumnWidth=".5">
                                                    <Items>
                                                        <ext:Label runat="server" ID="lblEnd" ForID="dflEnd" Text="To" />
                                                        <ext:DateField ID="dflEnd" runat="server" Vtype="daterange" Icon="Date" Width="120" LabelAlign="Top">
                                                            <CustomConfig>
                                                                <ext:ConfigItem Name="startDateField" Value="#{dflStart}" Mode="Value" />
                                                            </CustomConfig>  
                                                        </ext:DateField>
                                                    </Items>
                                                </ext:Container>
                                            </Items>
                                        </ext:Container>
                                        <ext:Container ID="Container4" runat="server" Layout="Form" Width="500">
                                            <Items>
                                                <ext:Label runat="server" ID="Label1" ForID="mcoLogLevel" Text="Log Levels" />
                                                <ext:MultiCombo ID="mcoLogLevel" runat="server" 
                                                    Width="370" WrapBySquareBrackets="true" SelectionMode="All" LabelAlign="Top" LabelWidth="30">
                                                </ext:MultiCombo>
                                             </Items>      
                                        </ext:Container>
                                    </Content>
                                    <Buttons>
                                         <ext:Button ID="btnSearchLogs"  runat="server" Text="Search Logs" Icon="Magnifier">
                                            <Listeners>
                                                <Click Handler="#{stoLogEntries}.reload();">
                                                </Click>
                                            </Listeners>
                                         </ext:Button>
                                    </Buttons>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="pnlLogs" runat="server" Padding="5" BodyBorder="true" Title="Logs">
                            <Items>
                                <ext:FitLayout runat="server"><Items>
                                <ext:GridPanel ID="gpnLogs" runat="server" Height="500" Header="true" StripeRows="true" AutoWidth="true">
                                    <ColumnModel runat="server">
                                        <Columns>
                                            <ext:Column ColumnID="Id" Header="Id" Width="40" DataIndex="Id" />
                                            <ext:DateColumn ColumnID="Created" Header="Created" Width="120" DataIndex="Created" Format="dd/MM/yyyy H:mm:ss" />
                                            <ext:Column ColumnID="Source" Header="Source" Width="330" DataIndex="Source" />
                                            <ext:Column ColumnID="Operation" Header="Operation" Width="440" DataIndex="Operation" />
                                            <ext:Column ColumnID="LogLevel" Header="Log Level" Width="60" DataIndex="LogLevel">
                                                <Renderer Fn="renderLogLevel" />
                                            </ext:Column>
                                            <ext:Column ColumnID="Message" Header="Message" Width="150" DataIndex="Message" />
                                        </Columns>
                                    </ColumnModel>
                                    <Store>
                                        <ext:Store ID="stoLogEntries" runat="server" OnRefreshData="stoLogEntries_RefreshData">
                                            <Reader>
                                                <ext:JsonReader IDProperty="Id">
                                                    <Fields>
                                                        <ext:RecordField Name="Id" Type="Int" Mapping="Id" />
                                                        <ext:RecordField Name="JobId" Type="Int" Mapping="JobId" />
                                                        <ext:RecordField Name="Created" Type="Date" Mapping="Created" />
                                                        <ext:RecordField Name="Source" Type="String" Mapping="Source" />
                                                        <ext:RecordField Name="Operation" Type="String" Mapping="Operation" />
                                                        <ext:RecordField Name="LogLevel" Type="String" Mapping="LogLevel" />
                                                        <ext:RecordField Name="Message" Type="String" Mapping="Message" />
                                                    </Fields>
                                                </ext:JsonReader>
                                            </Reader>
                                            <SortInfo Field="Id" Direction="ASC" />
                                        </ext:Store>
                                    </Store>
                                    <SelectionModel>
                                    <ext:RowSelectionModel ID="rsmSearchResults" SingleSelect="true" runat="server" />
                                    </SelectionModel>
                                    <DirectEvents>
                                    <RowDblClick OnEvent="gpnLogsRow_DblClick" />
                                    </DirectEvents>
                                    <LoadMask ShowMask="true" />
                                    <BottomBar>
                                    <ext:PagingToolbar ID="ptbSearchResults" runat="server" PageSize="20" 
                                    DisplayInfo="true"  
                                    DisplayMsg="Displaying Technical Log Entries {0} - {1} of {2}" 
                                    EmptyMsg="No Technical Log Entries to display"
                                      />
                                    </BottomBar>
                                </ext:GridPanel>
                                </Items></ext:FitLayout>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Panel>
     <%--       </Items>
        </ext:FitLayout>--%>
        <ext:Window runat="server" Hidden="true" ID="winExceptionDetail" Modal="true" Width="800px" Height="600px" Title="Exception Details">
            <Items>
                 <ext:Panel runat="server" ID="pnlLogEntryDetails" Height="200px" Title="Overview" Icon="Note">
                    <Content>
                        <table class="detailsView">
                            <tr class="fieldData">
                                <td class="fieldHeader">
                                    ID
                                </td>
                                <td>
                                    <ext:Label ID="ltId" runat="server"></ext:Label>
                                </td>
                             </tr>
                            <tr class="fieldDataAlternate">
                                <td class="fieldHeader">
                                    Created
                                </td>
                                <td>
                                    <ext:Label ID="ltCreated" runat="server"></ext:Label>
                                </td>
                            </tr>
                            <tr class="fieldData">
                                <td class="fieldHeader">
                                    Source
                                </td>
                                <td>
                                    <ext:Label ID="ltSource" runat="server"></ext:Label>
                                </td>
                             </tr>
                            <tr class="fieldDataAlternate">
                                <td class="fieldHeader">
                                    Operation
                                </td>
                                <td>
                                    <ext:Label ID="ltOperation" runat="server"></ext:Label>
                                </td>
                            </tr>
                            <tr class="fieldData">
                                <td class="fieldHeader">
                                    Log Level
                                </td>
                                <td>
                                    <ext:Label ID="ltLogLevel" runat="server"></ext:Label>
                                </td>
                             </tr>
                            <tr class="fieldDataAlternate">
                                <td class="fieldHeader">
                                    Message
                                </td>
                                <td>
                                    <ext:Label ID="ltMessage" runat="server"></ext:Label>
                                </td>
                            </tr>
                        </table>
                    </Content>
                </ext:Panel>
                <ext:Panel runat="server" ID="pnlStackTrace" Height="600px" Layout="Fit" Title="Stack Trace" Icon="PageCode">
                    <Items>
                        <ext:TextArea ID="txtStackTrace" runat="server" ReadOnly="true">
                        </ext:TextArea>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Window>
    </asp:Content>
    Master Page:
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Application.master.cs" Inherits="BASA.Web.Application" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <%@ Register src="UserControls/Includes/LeftNav.ascx" tagname="LeftNav" tagprefix="uc1" %>
     
    <!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 id="Head1" runat="server">
            <title></title>
            <asp:ContentPlaceHolder ID="head" runat="server">
            </asp:ContentPlaceHolder>
            <script src="Includes/Scripts/jquery-1.5.min.js"></script>
            <script src="Includes/Scripts/jcookie-min.js"></script>
            <script src="Includes/Scripts/Default.js"></script>
        </head>
        <body>
            <form id="form1" runat="server">
                <ext:ResourceManager runat="server" ID="resMgr" />
                <ext:Viewport ID="vptMain" runat="server" Layout="border">
                    <Items>
                        <ext:Panel ID="pnlLeftNav" runat="server" Region="West">
                            <Content>
                                <uc1:LeftNav ID="LeftNav1" runat="server" />
                            </Content>
                        </ext:Panel>
                        <ext:Panel ID="pnlMain" runat="server" Region="Center">
                            <Content>
                                <asp:ContentPlaceHolder ID="cphMain" runat="server">
                                </asp:ContentPlaceHolder>
                            </Content>
                        </ext:Panel>
                    </Items>
                </ext:Viewport>
            </form>
        </body>
    </html>
  2. #2
    The problem is the form tag.

Similar Threads

  1. Page doesn't display on Safari browser
    By fac in forum 1.x Help
    Replies: 8
    Last Post: Jan 07, 2012, 9:56 AM
  2. Gridpanel doesn't resize properly
    By gdog_5021 in forum 1.x Help
    Replies: 10
    Last Post: Aug 18, 2011, 2:45 PM
  3. [CLOSED] Problem with Gridpanel and Viewport on browser resize
    By John_Writers in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 10, 2011, 10:44 AM
  4. Gridpanel resize with browser window
    By DasPhansom in forum 1.x Help
    Replies: 3
    Last Post: Dec 22, 2008, 12:05 PM
  5. [CLOSED] wanting to get panel to resize with browser
    By pkellner in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Oct 15, 2008, 1:05 AM

Tags for this Thread

Posting Permissions