[CLOSED] Incorrect portlet size after move

  1. #1

    [CLOSED] Incorrect portlet size after move

    In the below example, I have 4 portlet controls on a page. If I move "Portlet 1" over to the right-hand portal column, the Toolbar in the BottomBar disappears (it looks like it hasn't taken the Toolbar height in to account after the Portlet has been moved):

    <ext:ScriptManager runat="server" Theme="Slate"></ext:ScriptManager>
    
    <ext:Store runat="server" ID="strData">
        <Reader>
        <ext:ArrayReader>
            <Fields>
            <ext:RecordField Name="UserName"></ext:RecordField>
            </Fields>
        </ext:ArrayReader>
        </Reader>
    </ext:Store>
    
    <ext:ViewPort ID="ViewPort1" runat="server">
        <Body>
        <ext:BorderLayout ID="BorderLayout1" runat="server">
            <North MaxHeight="100" MinHeight="100">
            <ext:Panel ID="Panel1" runat="server" Height="100" Width="650" BodyStyle="background-color: rgb(237, 240, 238);" Border="false" Frame="false">
                <Body>
                <p>Header goes here</p>
                </Body>
            </ext:Panel>
            </North>
            <West MaxWidth="400" MinWidth="180" Collapsible="true" Split="true">
            <ext:TreePanel ID="TreePanel1" runat="server" Title="Treepanel" Width="275" RootVisible="false">
                <Root>
                <ext:TreeNode Text="Dummy node" Icon="Book">
                    <Nodes>
                    <ext:TreeNode Text="Your Projects" Icon="Book">
                    </ext:TreeNode>
                    <ext:TreeNode Text="Timesheet" Icon="Clock">
                    </ext:TreeNode>
                    <ext:TreeNode Text="Reports" Icon="Report">
                    </ext:TreeNode>
                    <ext:TreeNode Text="Favourites" Icon="Star">
                    </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
                </Root>
                <BottomBar>
                <ext:Toolbar runat="server">
                    <Items>
                    <ext:Button Icon="Anchor" Text="Test"></ext:Button>
                    </Items>
                </ext:Toolbar>
                </BottomBar>
                <Tools>
                <ext:Tool Type="Help" Qtip="Help Guide" />
                </Tools>
            </ext:TreePanel>
            </West>
            <Center>
            <ext:TabPanel ID="tabPanel" runat="server" DeferredRender="true" TabWidth="180" MinTabWidth="160" ResizeTabs="true" EnableTabScroll="true">
                <Tabs>
                <ext:Tab runat="server" ID="tabDashboard" Title="Dashboard" Icon="Package" BodyStyle="background-color: rgb(237, 240, 238);">
                    <Body>
                    <ext:FitLayout runat="server">
                        <ext:Portal ID="Portal1" runat="server" Border="false" BodyStyle="background-color: rgb(237, 240, 238);">
                        <Body>
                            <ext:ColumnLayout ID="ColumnLayout2" runat="server">
                            <ext:LayoutColumn ColumnWidth=".5">
                                <ext:PortalColumn 
                                ID="PortalColumn1" 
                                runat="server" 
                                StyleSpec="padding:10px 0 10px 10px">
                                <Body>
                                    <ext:AnchorLayout ID="AnchorLayout1" runat="server">
                                    <ext:Anchor>
                                        <ext:Portlet Height="325" BodyStyle="background-color: rgb(237, 240, 238)" ID="ptlProjects" runat="server" Title="Portlet 1">
                                        <Body>
                                            <ext:FitLayout ID="FitLayout1" runat="server">
                                            <ext:GridPanel BodyStyle="padding: 0px;" ID="grdProjects" runat="server" StoreID="strData">
                                                <ColumnModel>
                                                <Columns>
                                                    <ext:Column Header="UserName" DataIndex="UserName">
                                                    </ext:Column>
                                                </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                <ext:RowSelectionModel></ext:RowSelectionModel>
                                                </SelectionModel>
                                                <BottomBar>
                                                <ext:Toolbar ID="Toolbar1111" runat="server">
                                                    <Items>
                                                    <ext:ToolbarFill ID="ToolbarFill1111" runat="server"></ext:ToolbarFill>
    
                                                    <ext:Button ID="Button3" runat="server" Text="To Excel" Icon="PageExcel">
                                                        <Listeners>
                                                        <Click Handler="exportData(#{grdProjects}, #{hidFormatType}, 'xls');" />
                                                        </Listeners>
                                                    </ext:Button>
    
                                                    <ext:Button ID="Button4" runat="server" Text="To CSV" Icon="PageAttach">
                                                        <Listeners>
                                                        <Click Handler="exportData(#{grdProjects}, #{hidFormatType}, 'csv');" />
                                                        </Listeners>
                                                    </ext:Button>
                                                    </Items>
                                                </ext:Toolbar>
                                                </BottomBar>
                                            </ext:GridPanel>
                                            </ext:FitLayout>
                                        </Body>
                                        </ext:Portlet>
                                    </ext:Anchor>
                                    <ext:Anchor>
                                        <ext:Portlet Height="325" BodyStyle="background-color: rgb(237, 240, 238)" ID="Portlet1" runat="server" Title="Portlet 2">
                                        <Body>
                                            <ext:FitLayout ID="FitLayout5" runat="server">
                                            <ext:GridPanel BodyStyle="padding: 0px;" ID="GridPanel4" runat="server" StoreID="strData">
                                                <TopBar>
                                                <ext:Toolbar ID="Toolbar2" runat="server">
                                                    <Items>
                                                    <ext:Label ID="Label1" Html="&amp;nbsp;Criteria:&amp;nbsp;" StyleSpec="color: white;" runat="server"></ext:Label>
                                                    <ext:TextField EnableKeyEvents="true" runat="server" ID="txtSearch" Width="320">
                                                    </ext:TextField>
                                                    </Items>
                                                </ext:Toolbar>
                                                </TopBar>
                                                <ColumnModel>
                                                <Columns>
                                                    <ext:Column Header="UserName" ColumnID="colProjectTitle" DataIndex="UserName">
                                                    </ext:Column>
                                                </Columns>
                                                </ColumnModel>
                                                <View>
                                                <ext:GroupingView ID="GroupingView12" runat="server" ForceFit="true" StartCollapsed="false" ShowGroupName="false" EnableNoGroups="true" HideGroupedColumn="true"></ext:GroupingView>
                                                </View>
                                                <Plugins>
                                                                <ext:GroupingSummary ID="GroupingSummary1" runat="server" />
                                                            </Plugins>
                                                <SelectionModel>
                                                <ext:RowSelectionModel></ext:RowSelectionModel>
                                                </SelectionModel>
                                            </ext:GridPanel>
                                            </ext:FitLayout>
                                        </Body>
                                        </ext:Portlet>
                                    </ext:Anchor>
                                    </ext:AnchorLayout>
                                </Body>
                                </ext:PortalColumn>
                            </ext:LayoutColumn>
                            <ext:LayoutColumn ColumnWidth=".5">
                                <ext:PortalColumn 
                                ID="PortalColumn3" 
                                runat="server" 
                                StyleSpec="padding:10px">
                                <Body>
                                    <ext:AnchorLayout ID="AnchorLayout3" runat="server">
                                    <ext:Anchor>
                                         <ext:Portlet Height="325" BodyStyle="background-color: rgb(237, 240, 238)" ID="ptlMessages" runat="server" Title="Portlet 3">
                                        <Body>
                                            <ext:FitLayout ID="FitLayout2" runat="server">
                                            <ext:GridPanel BodyStyle="padding: 0px;" ID="GridPanel2" runat="server" StoreID="strData">
                                                <ColumnModel>
                                                <Columns>
                                                    <ext:Column Header="UserName" DataIndex="UserName">
                                                    </ext:Column>
                                                </Columns>
                                                </ColumnModel>
                                                <SelectionModel>
                                                <ext:RowSelectionModel></ext:RowSelectionModel>
                                                </SelectionModel>
                                            </ext:GridPanel>
                                            </ext:FitLayout>
                                        </Body>
                                        </ext:Portlet>
                                    </ext:Anchor>
                                    <ext:Anchor>
                                        <ext:Portlet Height="325" BodyStyle="background-color: rgb(237, 240, 238)" ID="ptlApprovals" runat="server" Title="Portlet 4">
                                        <Body>
                                            <ext:FitLayout ID="FitLayout3" runat="server">
                                            <ext:GridPanel Stateful="false" BodyStyle="padding: 0px;" ID="grdApprovals" runat="server" StoreID="strData">
                                                <ColumnModel>
                                                <Columns>
                                                    <ext:Column Header="UserName" DataIndex="UserName" />
                                                </Columns>
                                                </ColumnModel>
                                                <View>
                                                <ext:GroupingView ID="GroupingView13" runat="server" ForceFit="true" StartCollapsed="true" ShowGroupName="false" EnableNoGroups="true" HideGroupedColumn="true"></ext:GroupingView>
                                                </View>
                                                <SelectionModel>
                                                <ext:CheckboxSelectionModel SingleSelect="false"></ext:CheckboxSelectionModel>
                                                </SelectionModel>
                                                <Plugins>
                                                                <ext:GroupingSummary ID="GroupingSummary2" runat="server" />
                                                            </Plugins>
                                                <BottomBar>
                                                <ext:Toolbar ID="Toolbar3" runat="server">
                                                    <Items>
                                                    <ext:ToolbarButton Text="Approve" Icon="Tick"></ext:ToolbarButton>
                                                    <ext:ToolbarButton Text="Reject" Icon="Cross"></ext:ToolbarButton>
                                                    <ext:ToolbarFill ID="ToolbarFill2" runat="server"></ext:ToolbarFill>
    
                                                    <ext:Button ID="Button1" runat="server" Text="To Excel" Icon="PageExcel">
                                                        <Listeners>
                                                        <Click Handler="exportData(#{grdApprovals}, #{hidFormatType}, 'xls');" />
                                                        </Listeners>
                                                    </ext:Button>
    
                                                    <ext:Button ID="Button2" runat="server" Text="To CSV" Icon="PageAttach">
                                                        <Listeners>
                                                        <Click Handler="exportData(#{grdApprovals}, #{hidFormatType}, 'csv');" />
                                                        </Listeners>
                                                    </ext:Button>
                                                    </Items>
                                                </ext:Toolbar>
                                                </BottomBar>
                                            </ext:GridPanel>
                                            </ext:FitLayout>
                                        </Body>
                                        </ext:Portlet>
                                    </ext:Anchor>
                                    </ext:AnchorLayout>
                                </Body>
                                </ext:PortalColumn>
                            </ext:LayoutColumn>
                            </ext:ColumnLayout>    
                        </Body>
                        </ext:Portal>
                    </ext:FitLayout>
                    </Body>
                </ext:Tab>
                </Tabs>
            </ext:TabPanel>
            </Center>
        </ext:BorderLayout>
        </body>
    </ext:ViewPort>
  2. #2

    RE: [CLOSED] Incorrect portlet size after move

    Hi,

    I found that StyleSpec (padding) of LayoutColumn is source of problem. I suggest to change padding for both layout's columns so it would have same padding size


    First column: StyleSpec="padding:10px 5px 10px 10px"
    Second column: StyleSpec="padding:10px 10px 10px 5px"
    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: [CLOSED] Incorrect portlet size after move

    Thanks, that sorted it!

    Dan

Similar Threads

  1. [CLOSED] Icons on desktop in FF and Chrome have incorrect size.
    By skisly in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 24, 2011, 9:54 AM
  2. Replies: 4
    Last Post: Apr 08, 2010, 9:05 PM
  3. Replies: 0
    Last Post: Mar 03, 2010, 10:51 AM
  4. Replies: 0
    Last Post: Dec 10, 2009, 7:54 PM
  5. [CLOSED] Portlet Fixed Size
    By Zarzand in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 18, 2009, 6:11 PM

Posting Permissions