[CLOSED] Accordion + GridPanel + hidden ScrollBars

  1. #1

    [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

    <%@ 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>
    Attached Thumbnails Click image for larger version. 

Name:	Panel1.jpg 
Views:	94 
Size:	94.2 KB 
ID:	2405   Click image for larger version. 

Name:	Panel2.jpg 
Views:	85 
Size:	93.5 KB 
ID:	2406   Click image for larger version. 

Name:	Panel3.jpg 
Views:	67 
Size:	94.9 KB 
ID:	2407  
    Last edited by Daniil; Mar 15, 2011 at 7:23 AM. Reason: Formatted, [CLOSED]
  2. #2
    Hi,

    Please interchange of closing [/ CODE] tag and opening [CODE ] tag.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    Please interchange of closing [/ CODE] tag and opening [CODE ] tag.
    It's Done!
  4. #4
    Thanks. But I also edited the code you posted: copied to VS, pressed CTRL+K+D (hot key 'formatting') and posted back.
  5. #5
    I see 3 user controls in the .aspx, but you didn't provide us with its sources.

    Well, I'm sure all this code is not required to reproduce the issue. So, please reduce leaving the code only that really required to reproduce the issue.

Similar Threads

  1. Hidden check box group inside Accordion
    By Egale in forum 1.x Help
    Replies: 0
    Last Post: May 07, 2011, 8:41 AM
  2. Hidden check box group inside Accordion
    By Egale in forum 1.x Help
    Replies: 2
    Last Post: May 06, 2011, 7:46 PM
  3. [CLOSED] AutoHeight gridpanel and scrollbars
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 22, 2010, 5:06 PM
  4. [CLOSED] GridPanel vertical scrollbars
    By state in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 14, 2009, 7:07 PM
  5. [CLOSED] GridPanel scrollbars
    By danielg in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 21, 2009, 1:01 AM

Posting Permissions