[CLOSED] Need help with Border layout

  1. #1

    [CLOSED] Need help with Border layout



    Hi
    I have 2 problems with this layout,
    1. If the windows is resized and made smaller the content should resize the borderlayout and panels. When this happend the borders get really thick, lite 50px or so. It looks really crappy
    2. I have a grid panel in this layout with a lot of columns in it, if the page loads up in a small window, and the made bigger by the user, the grid does not repaint and show the columns that where hidden before.

    Please try the samle code, and try to resize the window by dragging in the corner of the window.
    I use IE7

    Thanks
    Mikael

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <script runat="server">
    </script>
    
    
    <script type="text/javascript">
    
    
        
    </script>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ScriptManager ID="ScriptManager1" runat="server" >
        </ext:ScriptManager>
        
        <form id="form1" runat="server">
        
        <asp:SqlDataSource ID="SqlDS" runat="server" ></asp:SqlDataSource>
        <ext:Store ID="Store1" runat="server" DataSourceID="SqlDS">
            <Reader>            
                <ext:JsonReader >
                    <Fields>     
                    <ext:RecordField Name="test"></ext:RecordField>              
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store> 
                
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <Center Collapsible="false" Split="true">
                        <ext:Panel ID="pnlBody" runat="server" AutoScroll="true" Header="false" Border="false">
                            <Body>
                                
                                <ext:BorderLayout ID="BorderLayout2" runat="server">
                                <North Split="true" Collapsible="true">
                                    <ext:Panel Height="60" ID="pnlSelection" runat="server" AutoScroll="true" Title="Selection" Border="false" BodyStyle="padding:4px;">
                                    <Body>
                                    </Body>
                                    </ext:Panel>                            
                                </North>
                                <Center >
                                    <ext:Panel ID="pnlCenter" runat="server" AutoScroll="true" Header="false" Border="false" >
                                        <Body>
                                            <ext:BorderLayout ID="BorderLayout3" runat="server">
                                            <North Split="true" >
                                                <ext:Panel Height="290" ID="pnlNorth" runat="server" AutoScroll="true" Title="North" Border="false" BodyStyle="padding:4px;">
                                                </ext:Panel>                            
                                            </North>
                                            <Center>
                                                <ext:Panel ID="pnlInnerCenter" runat="server" AutoScroll="true" Header="false" Border="false" >
                                                <Body>      
                                                
                                                    <ext:GridPanel 
                                                    AutoScroll="true"
                                                    StoreID="Store1"
                                                    runat="server" 
                                                    ID="GridPanel1" 
                                                    Header="false"
                                                    AutoWidth="true"
                                                    Height="200"
                                                    Floating="true" Border="true" BodyBorder="false" >
                                                    <ColumnModel ID="ColumnModel1" runat="server">
                                                        <Columns>                                
                                                            <ext:Column Header="Column 1"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 2"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 3"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 4"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 5"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 6"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 7"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 8"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 9"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 10"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 11"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 12"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 13"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 14"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 15"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 16"  Width="60">
                                                            </ext:Column>
                                                            <ext:Column Header="Column 17"  Width="60">
                                                            </ext:Column>
                                    
                                                            
                                                        </Columns>
                                                        </ColumnModel>  
                                                          
                                                        <SelectionModel>
                                                            <ext:RowSelectionModel ></ext:RowSelectionModel>
                                                        </SelectionModel>
         
         
                                                    </ext:GridPanel>
                                                </Body>
                                                </ext:Panel> 
                                                                                                      
                                            </Center>
                                            
                                            </ext:BorderLayout>                                
                                        </Body>
                                    </ext:Panel>                                                        
                                </Center>
                                <East MinWidth="345" MaxWidth="345" Split="true" Collapsible="false">
                                    <ext:Panel Width="345" ID="pnlEast" runat="server" AutoScroll="true" Title="East" Border="true" BodyStyle="padding:4px;">
                                    </ext:Panel>
                                </East>
                                
                                </ext:BorderLayout>
     
                                    
                            </Body>                     
                        </ext:Panel>
                    </Center>
                    <South>
    
    
                        <ext:StatusBar 
                        ID="sbBottombar" 
                        runat="server"  
                        DefaultText="">
                        <Items>                    
                        </Items>
                        </ext:StatusBar>    
                    </South>
                </ext:BorderLayout>     
                   
            </Body>
        </ext:ViewPort>
    
    
        </form>
    </body>
    </html>
  2. #2

    RE: [CLOSED] Need help with Border layout

    Hi,

    1. Please remove AutoScroll="true" from pnlBody and pnlCenter. These panels contain BorderLayout in Body. BorderLayout and scrolling can't be used at one time.

    2. You need place GridPanel into the layout. For example, place grid directly to Center region (remove pnlInnerCenter). Or (if you need pnlInnerCenter) add FitLayout inside pnlInnerCenter and place grid inside FitLayout

    Here is corrected version
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!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>
    </head>
    <body>    
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server">
            </ext:ScriptManager>
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="test">
                            </ext:RecordField>
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            
            <ext:ViewPort ID="ViewPort1" runat="server">
                <Body>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <Center Collapsible="false" Split="true">
                            <ext:Panel ID="pnlBody" runat="server" Header="false" Border="false">
                                <Body>
                                    <ext:BorderLayout ID="BorderLayout2" runat="server">
                                        <North Split="true" Collapsible="true">
                                            <ext:Panel Height="60" ID="pnlSelection" runat="server" AutoScroll="true" Title="Selection"
                                                Border="false" BodyStyle="padding:4px;">
                                                <Body>
                                                </Body>
                                            </ext:Panel>
                                        </North>
                                        <Center>
                                            <ext:Panel ID="pnlCenter" runat="server" Header="false" Border="false">
                                                <Body>
                                                    <ext:BorderLayout ID="BorderLayout3" runat="server">
                                                        <North Split="true">
                                                            <ext:Panel Height="290" ID="pnlNorth" runat="server" AutoScroll="true" Title="North"
                                                                Border="false" BodyStyle="padding:4px;">
                                                            </ext:Panel>
                                                        </North>
                                                        <Center>
                                                            <ext:GridPanel AutoScroll="true" StoreID="Store1" runat="server" ID="GridPanel1"
                                                                Header="false" AutoWidth="true" Height="200" Floating="true" Border="true" BodyBorder="false">
                                                                <ColumnModel ID="ColumnModel1" runat="server">
                                                                    <Columns>
                                                                        <ext:Column Header="Column 1" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 2" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 3" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 4" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 5" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 6" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 7" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 8" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 9" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 10" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 11" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 12" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 13" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 14" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 15" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 16" Width="60">
                                                                        </ext:Column>
                                                                        <ext:Column Header="Column 17" Width="60">
                                                                        </ext:Column>
                                                                    </Columns>
                                                                </ColumnModel>
                                                                <SelectionModel>
                                                                    <ext:RowSelectionModel>
                                                                    </ext:RowSelectionModel>
                                                                </SelectionModel>
                                                            </ext:GridPanel>
                                                        </Center>
                                                    </ext:BorderLayout>
                                                </Body>
                                            </ext:Panel>
                                        </Center>
                                        <East MinWidth="345" MaxWidth="345" Split="true" Collapsible="false">
                                            <ext:Panel Width="345" ID="pnlEast" runat="server" AutoScroll="true" Title="East"
                                                Border="true" BodyStyle="padding:4px;">
                                            </ext:Panel>
                                        </East>
                                    </ext:BorderLayout>
                                </Body>
                            </ext:Panel>
                        </Center>
                        <South>
                            <ext:StatusBar ID="sbBottombar" runat="server" DefaultText="">
                                <Items>
                                </Items>
                            </ext:StatusBar>
                        </South>
                    </ext:BorderLayout>
                </Body>
            </ext:ViewPort>
        </form>
    </body>
    </html>

  3. #3

    RE: [CLOSED] Need help with Border layout

    Thanks!
    That worked excellent!

    /Mikael

Similar Threads

  1. border layout inside of tab
    By craig2005 in forum 1.x Help
    Replies: 1
    Last Post: Dec 31, 2010, 8:58 PM
  2. [CLOSED] [1.0] Resize Border layout issues
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 26, 2010, 7:17 PM
  3. Border Layout not getting collapsed
    By vivekrane1986 in forum 1.x Help
    Replies: 0
    Last Post: Jun 05, 2010, 6:23 AM
  4. [CLOSED] Border Layout percentage
    By GmServizi in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 22, 2009, 7:51 AM
  5. Border Layout
    By oskarni in forum 1.x Help
    Replies: 7
    Last Post: Apr 10, 2008, 9:19 PM

Posting Permissions