Mar 08, 2011, 11:06 AM
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:
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 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>
