[CLOSED] GridPanel scrollbars

  1. #1

    [CLOSED] GridPanel scrollbars

    With the below example code, when the page loads, the GridPanel's vertical scroll bar is partially hidden (see ExampleA.png).* Then when the window is resized smaller, the GridPanel's vertical scroll bar is completely hidden, and there is no horizontal scroll bar to scroll to the rest of the GridPanel's contents (see ExampleB.png).

    Am I doing something wrong, or is this a bug?

    I'm using Coolite version 0.8.0.24069

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>
    
    <script runat="server">
    *** protected void Page_Load(object sender, EventArgs e)
    *** {
    ******* if (!Ext.IsAjaxRequest)
    ******* {
    *********** this.Store1.DataSource = new object[]
    *********** {
    *************** new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},
    *************** new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},
    *************** new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},
    *************** new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},
    *************** new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"},
    *************** new object[] {"AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"},
    *************** new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"},
    *************** new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"},
    *************** new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"},
    *************** new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"},
    *************** new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"},
    *************** new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"},
    *************** new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"},
    *************** new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"},
    *************** new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"},
    *************** new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"},
    *************** new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"},
    *************** new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"},
    *************** new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am"},
    *************** new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am"},
    *************** new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"},
    *************** new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"},
    *************** new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"},
    *************** new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"},
    *************** new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"},
    *************** new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"},
    *************** new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"},
    *************** new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"},
    *************** new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}
    *********** };
    
    *********** this.Store1.DataBind();
    ******* }
    *** }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    *** <title>Coolite Toolkit Example - Simple Array Grid</title>
    *** <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />*** 
    
    *** <script type="text/javascript">
    ******* var template = '{1}';
    
    ******* var change = function(value) {
    *********** return String.format(template, (value > 0) ? 'green' : 'red', value);
    ******* }
    
    ******* var pctChange = function(value) {
    *********** return String.format(template, (value > 0) ? 'green' : 'red', value + '%');
    ******* }
    *** </script>
    
    </head>
    <body>
    *** <form id="form1" runat="server">
    ******* <ext:ScriptManager ID="ScriptManager1" runat="server" />
    ******* 
    ******* <ext:Store ID="Store1" runat="server">
    *********** <Reader>
    *************** <ext:ArrayReader>
    ******************* <Fields>
    *********************** <ext:RecordField Name="company" />
    *********************** <ext:RecordField Name="price" Type="Float" />
    *********************** <ext:RecordField Name="change" Type="Float" />
    *********************** <ext:RecordField Name="pctChange" Type="Float" />
    *********************** <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
    ******************* </Fields>
    *************** </ext:ArrayReader>
    *********** </Reader>
    ******* </ext:Store>
    ******* 
    ******* <ext:ViewPort ID="ViewPort1" runat="server">
    *********** <Body>
    *************** <ext:BorderLayout ID="BorderLayout1" runat="server">
    *** *** *** *** *** <Center MarginsSummary="5 5 5 5">
    *** *** *** *** *** *** <ext:TabPanel ID="TabPanel1" DeferredRender="false" runat="server" ActiveTabIndex="0" Title="TabPanel">
    *************************** <Tabs>
    *** *** *** *** *** *** *** *** <ext:Tab ID="tabTest" Icon="Error" runat="server" Title="Test" StyleSpec="padding: 6px;">
    *********************************** <Body>
    *** *** *** *** *** *** *** *** *** *** <ext:ColumnLayout ID="ColumnLayout1" runat="server" FitHeight="true">
    *** *** *** *** *** *** *** *** *** *** *** <ext:LayoutColumn ColumnWidth=".50">
    *** *** *** *** *** *** *** *** *** *** *** *** <ext:Panel ID="pnlTest" Border="false" runat="server" MonitorResize="true">
    *** *** *** *** *** *** *** *** *** *** *** *** *** <Body>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:RowLayout ID="RowLayout1" runat="server">
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:LayoutRow RowHeight=".40">
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:GridPanel 
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ID="GridPanel1" 
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** runat="server" 
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** StoreID="Store1" 
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** StripeRows="true"
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** Title="Array Grid" 
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** TrackMouseOver="true"
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** MonitorResize="true"
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** AutoExpandColumn="Company">
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ColumnModel ID="ColumnModel1" runat="server">
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <Columns>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <Renderer Format="UsMoney" />
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </ext:Column>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <Renderer Fn="change" />
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </ext:Column>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <Renderer Fn="pctChange" />
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </ext:Column>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </ext:Column>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </Columns>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </ColumnModel>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <SelectionModel>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </SelectionModel>*********** 
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </ext:GridPanel>* 
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** </ext:LayoutRow>
    *** *** *** *** *** *** *** *** *** *** *** *** *** *** </ext:RowLayout>
    *** *** *** *** *** *** *** *** *** *** *** *** *** </Body>
    *** *** *** *** *** *** *** *** *** *** *** *** </ext:Panel>
    *** *** *** *** *** *** *** *** *** *** *** </ext:LayoutColumn>
    *** *** *** *** *** *** *** *** *** *** </ext:ColumnLayout>
    *** *** *** *** *** *** *** *** *** </Body>
    *** *** *** *** *** *** *** *** </ext:Tab>
    *** *** *** *** *** *** *** </Tabs>
    *** *** *** *** *** *** </ext:TabPanel>
    *** *** *** *** *** </Center>
    *** *** *** *** </ext:BorderLayout>
    *** *** *** </body>
    *** *** </ext:ViewPort>
    *** </form>
    </body>
    </html>
  2. #2

    RE: [CLOSED] GridPanel scrollbars

    Hi,

    You have many layout inside Tab. Is it really required?
    I change markup. Is it appropriated solution?

    <%@ Page Language="C#"  %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <%@ Import Namespace="Coolite.Ext.Web"%>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},
                    new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},
                    new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},
                    new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},
                    new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"},
                    new object[] {"AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"},
                    new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"},
                    new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"},
                    new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"},
                    new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"},
                    new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"},
                    new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"},
                    new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"},
                    new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"},
                    new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"},
                    new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"},
                    new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"},
                    new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"},
                    new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am"},
                    new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am"},
                    new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"},
                    new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"},
                    new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"},
                    new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"},
                    new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"},
                    new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"},
                    new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"},
                    new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"},
                    new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title> 
    
        <script type="text/javascript">
            var template = '{1}';
    
            var change = function(value) {
                return String.format(template, (value > 0) ? 'green' : 'red', value);
            }
    
            var pctChange = function(value) {
                return String.format(template, (value > 0) ? 'green' : 'red', value + '%');
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:ViewPort ID="ViewPort1" runat="server">
                <Body>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <Center MarginsSummary="5 5 5 5">
                            <ext:TabPanel ID="TabPanel1" DeferredRender="false" runat="server" ActiveTabIndex="0" Title="TabPanel">
                                <Tabs>
                                    <ext:Tab ID="tabTest" Icon="Error" runat="server" Title="Test" StyleSpec="padding: 6px;">
                                        <Body>
                                            
                                                                <ext:FitLayout runat="server">
                                                                    <ext:GridPanel 
                                                                        ID="GridPanel1" 
                                                                        runat="server" 
                                                                        StoreID="Store1" 
                                                                        StripeRows="true"
                                                                        Title="Array Grid" 
                                                                        TrackMouseOver="true"
                                                                        MonitorResize="true"
                                                                         AutoScroll="true"
                                                                        AutoExpandColumn="Company">
                                                                        <ColumnModel ID="ColumnModel1" runat="server">
                                                                            <Columns>
                                                                                <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                                                                                <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                                                                                    <Renderer Format="UsMoney" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
                                                                                    <Renderer Fn="change" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
                                                                                    <Renderer Fn="pctChange" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                                                                                    <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                                                                                </ext:Column>
                                                                            </Columns>
                                                                        </ColumnModel>
                                                                        <SelectionModel>
                                                                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                                                                        </SelectionModel>           
                                                                    </ext:GridPanel>  
                                                                </ext:FitLayout>
                                      
                                        </Body>
                                    </ext:Tab>
                                </Tabs>
                            </ext:TabPanel>
                        </Center>
                    </ext:BorderLayout>
                </body>
            </ext:ViewPort>
        </form>
    </body>
    </html>

  3. #3

    RE: [CLOSED] GridPanel scrollbars

    Hi Vladimir, thanks for the reply.

    Unfortunately this won't work in my scenario - I actually want the following layout (see attached file Screenshot.png), where you select a record in the top-left GridPanel, which then changes the data in the bottom-left GridPanel. The user can then select a record in the bottom-left GridPanel to display the item's details in the right-hand side of the screen.

    Is there any way I can achieve this type of layout? The code I'm using is below, I just tried to cut down the code on the first post.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPage.aspx.cs" Inherits="TestPage" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},
                    new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},
                    new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},
                    new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},
                    new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"},
                    new object[] {"AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"},
                    new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"},
                    new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"},
                    new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"},
                    new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"},
                    new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"},
                    new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"},
                    new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"},
                    new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"},
                    new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"},
                    new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"},
                    new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"},
                    new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"},
                    new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am"},
                    new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am"},
                    new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"},
                    new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"},
                    new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"},
                    new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"},
                    new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"},
                    new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"},
                    new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"},
                    new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"},
                    new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Coolite Toolkit Example - Simple Array Grid</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />    
    
        <script type="text/javascript">
            var template = '{1}';
    
            var change = function(value) {
                return String.format(template, (value > 0) ? 'green' : 'red', value);
            }
    
            var pctChange = function(value) {
                return String.format(template, (value > 0) ? 'green' : 'red', value + '%');
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="company" />
                            <ext:RecordField Name="price" Type="Float" />
                            <ext:RecordField Name="change" Type="Float" />
                            <ext:RecordField Name="pctChange" Type="Float" />
                            <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
            
            <ext:ViewPort ID="ViewPort1" runat="server">
                <Body>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <Center MarginsSummary="5 5 5 5">
                            <ext:TabPanel ID="TabPanel1" DeferredRender="false" runat="server" ActiveTabIndex="0" Title="TabPanel">
                                <Tabs>
                                    <ext:Tab ID="tabTest" Icon="Error" runat="server" Title="Test" StyleSpec="padding: 6px;">
                                        <Body>
                                            <ext:ColumnLayout ID="ColumnLayout1" runat="server" FitHeight="true">
                                                <ext:LayoutColumn ColumnWidth=".50">
                                                    <ext:Panel ID="pnlTest" Border="false" runat="server" MonitorResize="true">
                                                        <Body>
                                                            <ext:RowLayout ID="RowLayout1" runat="server">
                                                                <ext:LayoutRow RowHeight=".40">
                                                                    <ext:GridPanel 
                                                                        ID="GridPanel1" 
                                                                        runat="server" 
                                                                        StoreID="Store1" 
                                                                        StripeRows="true"
                                                                        Title="Select top-level record here" 
                                                                        TrackMouseOver="true"
                                                                        MonitorResize="true"
                                                                        AutoExpandColumn="Company">
                                                                        <ColumnModel ID="ColumnModel1" runat="server">
                                                                            <Columns>
                                                                                <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                                                                                <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                                                                                    <Renderer Format="UsMoney" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
                                                                                    <Renderer Fn="change" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
                                                                                    <Renderer Fn="pctChange" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                                                                                    <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                                                                                </ext:Column>
                                                                            </Columns>
                                                                        </ColumnModel>
                                                                        <SelectionModel>
                                                                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                                                                        </SelectionModel>            
                                                                    </ext:GridPanel>  
                                                                </ext:LayoutRow>
                                                                <ext:LayoutRow RowHeight=".60">
                                                                    <ext:GridPanel 
                                                                        ID="GridPanel2" 
                                                                        runat="server" 
                                                                        StoreID="Store1" 
                                                                        StripeRows="true"
                                                                        Title="Select sub-level record here" 
                                                                        TrackMouseOver="true"
                                                                        MonitorResize="true"
                                                                        AutoExpandColumn="Company" StyleSpec="padding-top: 6px;">
                                                                        <ColumnModel ID="ColumnModel2" runat="server">
                                                                            <Columns>
                                                                                <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                                                                                <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                                                                                    <Renderer Format="UsMoney" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
                                                                                    <Renderer Fn="change" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
                                                                                    <Renderer Fn="pctChange" />
                                                                                </ext:Column>
                                                                                <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                                                                                    <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                                                                                </ext:Column>
                                                                            </Columns>
                                                                        </ColumnModel>
                                                                        <SelectionModel>
                                                                            <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true" />
                                                                        </SelectionModel>            
                                                                    </ext:GridPanel>  
                                                                </ext:LayoutRow>
                                                            </ext:RowLayout>
                                                        </Body>
                                                    </ext:Panel>
                                                </ext:LayoutColumn>
                                                <ext:LayoutColumn ColumnWidth=".50">
                                                    <ext:Panel 
                                                        Title="Sub-level item details displayed here" Frame="true"
                                                        id="pnlDetails"
                                                        runat="server" StyleSpec="padding-left: 6px;">
                                                        <Body>
                                                            <table style="width: 100%;" cellspacing="8">
                                                                <tr>
                                                                    <td style="width:35%;">
                                                                        <p>Details</p>
                                                                    </td>
                                                                    <td>
                                                                        <ext:Label ID="lblDetails" runat="server" />
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </body>
                                                    </ext:Panel>
                                                </ext:LayoutColumn>
                                            </ext:ColumnLayout>
                                        </Body>
                                    </ext:Tab>
                                </Tabs>
                            </ext:TabPanel>
                        </Center>
                    </ext:BorderLayout>
                </body>
            </ext:ViewPort>
        </form>
    </body>
    </html>
  4. #4

    RE: [CLOSED] GridPanel scrollbars

    Hi,

    Thanks for the screenshot, I'll investigate it and answer to you today*


  5. #5

    RE: [CLOSED] GridPanel scrollbars

    Hi,

    I changed example (please see the following code, update from SVN first, we have fixed one bug in RowLayout)
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <%@ Import Namespace="Coolite.Ext.Web" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                this.Store1.DataSource = new object[]
                {
                    new object[] {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"},
                    new object[] {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"},
                    new object[] {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"},
                    new object[] {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"},
                    new object[] {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"},
                    new object[] {"AT&amp;T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"},
                    new object[] {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"},
                    new object[] {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"},
                    new object[] {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"},
                    new object[] {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"},
                    new object[] {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"},
                    new object[] {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"},
                    new object[] {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"},
                    new object[] {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"},
                    new object[] {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"},
                    new object[] {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"},
                    new object[] {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"},
                    new object[] {"Johnson &amp; Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"},
                    new object[] {"JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15, "9/1 12:00am"},
                    new object[] {"McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am"},
                    new object[] {"Merck &amp; Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"},
                    new object[] {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"},
                    new object[] {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"},
                    new object[] {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"},
                    new object[] {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"},
                    new object[] {"The Procter &amp; Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"},
                    new object[] {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"},
                    new object[] {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"},
                    new object[] {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    
        <script type="text/javascript">
            var template = '{1}';
    
            var change = function(value) {
                return String.format(template, (value > 0) ? 'green' : 'red', value);
            }
    
            var pctChange = function(value) {
                return String.format(template, (value > 0) ? 'green' : 'red', value + '%');
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug">
        </ext:ScriptManager>
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="price" Type="Float" />
                        <ext:RecordField Name="change" Type="Float" />
                        <ext:RecordField Name="pctChange" Type="Float" />
                        <ext:RecordField Name="lastChange" Type="Date" DateFormat="n/j h:ia" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:ViewPort ID="ViewPort1" runat="server" >
            <Body>
                <ext:FitLayout runat="server">
                    <ext:TabPanel ID="TabPanel1" DeferredRender="false" runat="server" ActiveTabIndex="0"
                        Title="TabPanel" >
                        <Tabs>
                            <ext:Tab ID="tabTest" Icon="Error" runat="server" Title="Test" StyleSpec="padding: 6px;">
                                <Body>
                                    <ext:ColumnLayout ID="ColumnLayout1" runat="server" FitHeight="true">
                                        <ext:LayoutColumn ColumnWidth=".50">
                                            <ext:Panel ID="pnlTest" Border="false" runat="server">
                                                <Body>
                                                    <ext:RowLayout ID="RowLayout1" runat="server">
                                                        <ext:LayoutRow RowHeight=".40">
                                                            <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
                                                                Title="Select top-level record here" TrackMouseOver="true" 
                                                                AutoExpandColumn="Company">
                                                                <ColumnModel ID="ColumnModel1" runat="server">
                                                                    <Columns>
                                                                        <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                                                                        <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                                                                            <Renderer Format="UsMoney" />
                                                                        </ext:Column>
                                                                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
                                                                            <Renderer Fn="change" />
                                                                        </ext:Column>
                                                                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
                                                                            <Renderer Fn="pctChange" />
                                                                        </ext:Column>
                                                                        <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                                                                            <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                                                                        </ext:Column>
                                                                    </Columns>
                                                                </ColumnModel>
                                                                <SelectionModel>
                                                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                                                                </SelectionModel>
                                                            </ext:GridPanel>
                                                        </ext:LayoutRow>
                                                        <ext:LayoutRow RowHeight=".60">
                                                            <ext:GridPanel ID="GridPanel2" runat="server" StoreID="Store1" StripeRows="true"
                                                                Title="Select sub-level record here" TrackMouseOver="true" 
                                                                AutoExpandColumn="Company" StyleSpec="padding-top: 6px;">
                                                                <ColumnModel ID="ColumnModel2" runat="server">
                                                                    <Columns>
                                                                        <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="company" />
                                                                        <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="price">
                                                                            <Renderer Format="UsMoney" />
                                                                        </ext:Column>
                                                                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="change">
                                                                            <Renderer Fn="change" />
                                                                        </ext:Column>
                                                                        <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="pctChange">
                                                                            <Renderer Fn="pctChange" />
                                                                        </ext:Column>
                                                                        <ext:Column Header="Last Updated" Width="85" Sortable="true" DataIndex="lastChange">
                                                                            <Renderer Fn="Ext.util.Format.dateRenderer('m/d/Y')" />
                                                                        </ext:Column>
                                                                    </Columns>
                                                                </ColumnModel>
                                                                <SelectionModel>
                                                                    <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true" />
                                                                </SelectionModel>
                                                            </ext:GridPanel>
                                                        </ext:LayoutRow>
                                                    </ext:RowLayout>
                                                </Body>
                                            </ext:Panel>
                                        </ext:LayoutColumn>
                                        <ext:LayoutColumn ColumnWidth=".50">
                                            <ext:Panel Title="Sub-level item details displayed here" Frame="true" ID="pnlDetails"
                                                runat="server" StyleSpec="padding-left: 6px;">
                                                <Body>
                                                    <table style="width: 100%;" cellspacing="8">
                                                        <tr>
                                                            <td style="width: 35%;">
                                                                <p>
                                                                    Details</p>
                                                            </td>
                                                            <td>
                                                                <ext:Label ID="lblDetails" runat="server" />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </Body>
                                            </ext:Panel>
                                        </ext:LayoutColumn>
                                    </ext:ColumnLayout>
                                </Body>
                            </ext:Tab>
                        </Tabs>
                    </ext:TabPanel>
                </ext:FitLayout>
            </Body>
        </ext:ViewPort>
        </form>
    </body>
    </html>

  6. #6

    RE: [CLOSED] GridPanel scrollbars

    Hi Vladimir, thanks very much for the help - this has resolved the problem.

    Many thanks!
  7. #7

    RE: [CLOSED] GridPanel scrollbars

    Sorry for this comment but pls tell me there is any solution for splitting scroll bar into 2 part like this image.
    Three columns haven't got scroll bar. And others have got scroll bar. Pls tell me if there is any solution.
    Thank in advances!

    Kevin

Similar Threads

  1. [CLOSED] Gridpanel enable horizontal scrollbars
    By tlfdesarrollo in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 08, 2012, 7:03 PM
  2. [CLOSED] Accordion + GridPanel + hidden ScrollBars
    By asztern in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 09, 2011, 5:12 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] Column alignment with scrollbars in GridPanel
    By jsemple in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Mar 09, 2009, 3:58 PM

Posting Permissions