Mar 09, 2011, 2:09 PM
[CLOSED] Accordion + GridPanel + hidden ScrollBars
Hi,
I've found a problem with the GridPanel's ScrollBars when a GridPanel and Accordion is combined.
If the GridPanel is in the first Panel, there is no problem.
If you add a GridPanel in the second Panel of the Accordion, the scrollbars are hidden until you click in the GridPanel header.
Thank you for your Help,
Ariel
I've found a problem with the GridPanel's ScrollBars when a GridPanel and Accordion is combined.
If the GridPanel is in the first Panel, there is no problem.
If you add a GridPanel in the second Panel of the Accordion, the scrollbars are hidden until you click in the GridPanel header.
Thank you for your Help,
Ariel
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Queries_GeneralQuery, App_Web_9toxippy" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Register Src="UserControls/GeneralQueryHours.ascx" TagName="GeneralQueryHours"
TagPrefix="uc1" %>
<%@ Register Src="UserControls/GeneralQueryTrips.ascx" TagName="GeneralQueryTrips"
TagPrefix="uc2" %>
<%@ Register Src="../Misc/UserControls/ucGeographicalTree.ascx" TagName="GeographicalTree"
TagPrefix="uc3" %>
<!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>General Query</title>
<script language="javascript" src="../Scripts/CooliteScripts.js" type="text/javascript"></script>
<link href="../Styles/WFCoolite.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="frmGeneralQuery" runat="server">
<ext:ScriptManager ID="smManager" runat="server" AjaxViewStateMode="Include">
<Listeners>
<WindowResize Handler="resizeGrid(#{ucGeneralQueryHours_grdDailyHours});" />
</Listeners>
</ext:ScriptManager>
<ext:Store runat="server" ID="stConsultant" AutoLoad="true">
<Reader>
<ext:JsonReader ReaderID="Id">
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="FullName" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Load Handler="#{grdConsultants}.getSelectionModel().selectAll();#{grdConsultants}.getSelectionModel().checkHeader();"
Delay="100" />
</Listeners>
</ext:Store>
<ext:Store runat="server" ID="stConsultantLevels" AutoLoad="true">
<Reader>
<ext:JsonReader ReaderID="Id">
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Description" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Load Handler="#{grdConsultantLevels}.getSelectionModel().selectAll();#{grdConsultantLevels}.getSelectionModel().checkHeader();"
Delay="100" />
</Listeners>
</ext:Store>
<ext:Store runat="server" ID="stHourTypes" AutoLoad="true">
<Reader>
<ext:JsonReader ReaderID="Id">
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Description" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Load Handler="#{grdHourTypes}.getSelectionModel().selectAll();#{grdHourTypes}.getSelectionModel().checkHeader();"
Delay="100" />
</Listeners>
</ext:Store>
<ext:Store runat="server" ID="stModules" AutoLoad="true">
<Reader>
<ext:JsonReader ReaderID="Id">
<Fields>
<ext:RecordField Name="Id" />
<ext:RecordField Name="Description" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Load Handler="#{grdModules}.getSelectionModel().selectAll();#{grdModules}.getSelectionModel().checkHeader();"
Delay="100" />
</Listeners>
</ext:Store>
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West MinWidth="225" MaxWidth="400" Split="true" Collapsible="true">
<ext:Panel ID="WestPanel" runat="server" Title="Filters and Grouping" Width="225">
<Body>
<ext:Accordion ID="AccordionLayout1" runat="server">
<ext:Panel ID="Panel2" runat="server" Title="General Filters" BodyStyle="padding-top:6px;padding-left:6px;"
AutoScroll="true">
<Body>
<ext:FormLayout ID="FormLayout1" runat="server" LabelAlign="Left">
<ext:Anchor>
<ext:DateField ID="dtDateFrom" runat="server" FieldLabel="Date From" Width="90" />
</ext:Anchor>
<ext:Anchor>
<ext:DateField ID="dtDateTo" runat="server" FieldLabel="Date To" Width="90" />
</ext:Anchor>
<ext:Anchor>
<ext:ComboBox ID="cmbShow" runat="server" FieldLabel="Show" Width="90" Editable="false">
<Items>
<ext:ListItem Text="All" Value="2" />
<ext:ListItem Text="Pending" Value="1" />
<ext:ListItem Text="Lots" Value="0" />
</Items>
<SelectedItem Value="2" />
</ext:ComboBox>
</ext:Anchor>
<ext:Anchor>
<ext:GridPanel runat="server" ID="grdConsultants" StoreID="stConsultant" Title="Consultants"
Header="false" AutoWidth="false" TrackMouseOver="true" Width="193px" Height="150px"
BodyStyle="text-align:left">
<View>
<ext:GridView>
<GetRowClass Fn="rowClassAlternateColor" />
</ext:GridView>
</View>
<SelectionModel>
<ext:CheckboxSelectionModel ID="checkSelectModel" runat="server">
</ext:CheckboxSelectionModel>
</SelectionModel>
<ColumnModel>
<Columns>
<ext:Column Header="Consultant" ColumnID="FullName" Sortable="true" DataIndex="FullName"
Width="150" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
</ext:GridPanel>
</ext:Anchor>
<ext:Anchor>
<ext:Panel ID="Panel21" runat="server" Height="8" Border="false" />
</ext:Anchor>
<ext:Anchor>
<ext:GridPanel runat="server" ID="grdConsultantLevels" StoreID="stConsultantLevels"
Title="Consultant Levels" Header="false" AutoWidth="true" TrackMouseOver="true"
Width="193px" Height="150px" BodyStyle="text-align:left">
<View>
<ext:GridView>
<GetRowClass Fn="rowClassAlternateColor" />
</ext:GridView>
</View>
<SelectionModel>
<ext:CheckboxSelectionModel ID="checkSelectModelCL" runat="server">
</ext:CheckboxSelectionModel>
</SelectionModel>
<ColumnModel>
<Columns>
<ext:Column Header="Consultant Level" ColumnID="Description" Sortable="true" DataIndex="Description"
Width="150" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
</ext:GridPanel>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Title="Daily Hours Filters" BodyStyle="padding:6px;">
<Body>
<ext:FormLayout ID="FormLayout2" runat="server">
<ext:Anchor>
<ext:Checkbox runat="server" BoxLabel="Include Trips" ID="chkIncludeTrips" HideLabel="true" />
</ext:Anchor>
<ext:Anchor>
<ext:GridPanel runat="server" ID="grdModules" StoreID="stModules" Title="Modules"
Header="false" AutoWidth="true" TrackMouseOver="true" Width="193px" Height="150px"
BodyStyle="text-align:left">
<View>
<ext:GridView>
<GetRowClass Fn="rowClassAlternateColor" />
</ext:GridView>
</View>
<SelectionModel>
<ext:CheckboxSelectionModel ID="checkSelectModel3" runat="server">
</ext:CheckboxSelectionModel>
</SelectionModel>
<ColumnModel>
<Columns>
<ext:Column Header="Module" ColumnID="Description" Sortable="true" DataIndex="Description"
Width="150" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
</ext:GridPanel>
</ext:Anchor>
<ext:Anchor>
<ext:Panel ID="Panel22" runat="server" Height="8" Border="false" />
</ext:Anchor>
<ext:Anchor>
<ext:GridPanel runat="server" ID="grdHourTypes" StoreID="stHourTypes" Title="HourTypes"
Header="false" AutoWidth="false" TrackMouseOver="true" Width="193" Height="150px"
BodyStyle="text-align:left">
<View>
<ext:GridView>
<GetRowClass Fn="rowClassAlternateColor" />
</ext:GridView>
</View>
<SelectionModel>
<ext:CheckboxSelectionModel ID="checkSelectModel1" runat="server">
</ext:CheckboxSelectionModel>
</SelectionModel>
<ColumnModel>
<Columns>
<ext:Column Header="Hour Type" ColumnID="Description" Sortable="true" DataIndex="Description"
Width="150" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
</ext:GridPanel>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
<ext:Panel ID="Panel5" runat="server" Title="Daily Hours Grouping" BodyStyle="padding:6px;">
<Body>
<ext:FormLayout ID="FormLayout5" runat="server">
<ext:Anchor Horizontal="100%">
<ext:RadioGroup ID="grpDailyHours" runat="server" ColumnsNumber="1" HideLabel="true"
ItemCls="x-check-group-alt">
<Items>
<ext:Radio ID="optDetailDailyHours" runat="server" BoxLabel="Detailed" Checked="true" />
<ext:Radio ID="optGroupDailyHours" runat="server" BoxLabel="Grouped" />
</Items>
</ext:RadioGroup>
</ext:Anchor>
<ext:Anchor>
<ext:Label Text="Click to select, drag to reorder" HideLabel="true">
</ext:Label>
</ext:Anchor>
<ext:Anchor>
<ext:MultiSelect ID="mslDailyHoursGroups" runat="server" Legend="Group By" Width="150"
Height="90" HideLabel="true" DragGroup="grp1" DropGroup="grp1">
<Items>
<ext:ListItem Text="Module" Value="1" />
<ext:ListItem Text="Consultant" Value="2" />
<ext:ListItem Text="Hour Type" Value="3" />
<ext:ListItem Text="Consultant Level" Value="4" />
</Items>
</ext:MultiSelect>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
<ext:Panel ID="Panel4" runat="server" Title="Trips Filters" AutoScroll="true" BodyStyle="padding:6px;">
<Body>
<uc3:GeographicalTree ID="ucCountries" runat="server" IgnoreCountriesWithoutProvinces="true" />
</Body>
</ext:Panel>
<ext:Panel ID="Panel8" runat="server" Title="Trips Grouping" BodyStyle="padding:6px;">
<Body>
<ext:FormLayout ID="FormLayout6" runat="server">
<ext:Anchor Horizontal="100%">
<ext:RadioGroup ID="grpTrips" runat="server" ColumnsNumber="1" HideLabel="true" ItemCls="x-check-group-alt">
<Items>
<ext:Radio ID="optDetailTrips" runat="server" BoxLabel="Detailed" Checked="true" />
<ext:Radio ID="optGroupTrips" runat="server" BoxLabel="Grouped by Country" />
</Items>
</ext:RadioGroup>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:Accordion>
</Body>
</ext:Panel>
</West>
<Center>
<ext:TabPanel ID="CenterPanel" runat="server">
<Tabs>
<ext:Tab ID="CenterTab1" runat="server" Title="Daily Hours" Border="false" BodyStyle="padding:6px;">
<Body>
<uc1:GeneralQueryHours ID="ucGeneralQueryHours" runat="server" />
</Body>
</ext:Tab>
<ext:Tab ID="CenterTab2" runat="server" Title="Trips" Border="false" BodyStyle="padding:6px;">
<Body>
<uc2:GeneralQueryTrips ID="ucGeneralQueryTrips" runat="server" ShowEditColumn="false"
ShowExportButton="true" IsTimesQuery="true" OnExportGridsToExcelEvent="ExportGridsToExcel" />
</Body>
</ext:Tab>
</Tabs>
<TopBar>
<ext:Toolbar ID="tbQuery" Flat="true" runat="server" Height="23">
<Items>
<ext:ToolbarSpacer>
</ext:ToolbarSpacer>
<ext:ToolbarButton Icon="Zoom" ID="btnQuery" StandOut="true" runat="server" Text="Apply Filters">
<AjaxEvents>
<Click ViewStateMode="Include" OnEvent="btnQuery_Click" Timeout="50000" Failure="Ext.MessageBox.alert('Error ', result.errorMessage);">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{CenterPanel}.body}" />
</Click>
</AjaxEvents>
</ext:ToolbarButton>
<ext:ToolbarSeparator>
</ext:ToolbarSeparator>
<ext:ToolbarButton Icon="PageExcel" ID="bntExport" StandOut="true" runat="server"
Text="Export">
<AjaxEvents>
<Click ViewStateMode="Include" OnEvent="btnExport_Click" Timeout="50000" Failure="Ext.MessageBox.alert('Error ', result.errorMessage);">
<EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{CenterPanel}.body}" />
</Click>
</AjaxEvents>
</ext:ToolbarButton>
</Items>
</ext:Toolbar>
</TopBar>
</ext:TabPanel>
</Center>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>
Last edited by Daniil; Mar 15, 2011 at 7:23 AM.
Reason: Formatted, [CLOSED]
Originally Posted by Daniil
