[CLOSED] Freeze the Toolbar at the top of screen area

  1. #1

    [CLOSED] Freeze the Toolbar at the top of screen area

    Hello Team, If we place a toolbar on a view port with "AutoScroll = true" and the view port having lots of controls inside it or place grid with lots of data, then view port shows the vertical scroll bar but some time the toolbar at the time gets hidden, and then we can make it visible by press CTRL+SHIFT+TAB (to navigate back on toolbar). This creates confusion as most of the time when we doing scrolling and view further detail at the bottom of the page the toolbar at the time gets hidden. Please suggest how to freeze the toolbar area to be visible all the time. This sample is just an example and not fully functional code.

    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Viewport ID="rootElement" runat="server" Border="false" AutoScroll="true">
            <Items>
                <ext:Toolbar runat="server" ID="toolBarButtons" ShadowMode="Sides" Height="28">
                    <Items>
                        <ext:Button runat="server" ID="btnSave" Text="Save" Icon="Disk">
                        </ext:Button>
                        <!-- omitted others for brevity -->
                    </Items>
                </ext:Toolbar>
                <ext:Panel runat="server" ID="pnlGrid" Border="False">
                    <Items>
                        <ext:GridPanel runat="server"
                            ID="grdTest"
                            Frame="False"
                            TitleCollapse="True"
                            EnableColumnMove="true"
                            SortableColumns="true">
                            <!-- omitted for brevity -->
                        </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </form>
    Thanks.
    Last edited by Daniil; Jan 10, 2015 at 11:35 AM. Reason: [CLOSED]
  2. #2
    Hello,

    Can you please try the following example and confirm that what you mean is the browser's rightmost vertical scrollbar, which when scrolled down (naturally) causes the toolbar to disappear?

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
        {
            Store store = (Store)sender;
            List<StockQuotation> data = new List<StockQuotation>();
            
            int start = e.Start,
                limit = e.Limit;
            Random randow = new Random();
            DateTime now = DateTime.Now;
            
            for (int i = start + 1; i <= start + limit; i++)
            {
                StockQuotation qoute = new StockQuotation()
                {
                    Company = "Company " + i,
                    Price = randow.Next(0, 200),
                    LastUpdate = now
                };
                
                data.Add(qoute);
            }
            store.Data = data;
            e.Total = 50000;
        }
    
        class StockQuotation
        {
            public string Company  { get; set; }
            public int Price { get; set; }
            public DateTime LastUpdate { get; set; }
        }
    </script>
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Viewport ID="rootElement" runat="server" Border="false" AutoScroll="true">
            <Items>
                <ext:Toolbar runat="server" ID="toolBarButtons" ShadowMode="Sides" Height="28">
                    <Items>
                        <ext:Button runat="server" ID="btnSave" Text="Save" Icon="Disk">
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
                <ext:Panel runat="server" ID="pnlGrid" Border="False" Layout="FitLayout" Height="900">
                    <Items>
           <ext:GridPanel ID="GridPanel1" 
                runat="server" 
                Width="500" 
                Height="500"
                DisableSelection="true" 
                Layout="FitLayout"
                Title="Stock Price">
                <Store>
                    <ext:Store ID="Store1" 
                        runat="server" 
                        Buffered="true" 
                        PageSize="200" 
                        TrailingBufferZone="10"
                        LeadingBufferZone="10"
                        OnReadData="Store_ReadData">
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:JsonReader Root="data" />
                                </Reader>
                            </ext:PageProxy>
                        </Proxy>
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="Company" />
                                    <ext:ModelField Name="Price" />
                                    <ext:ModelField Name="LastUpdate" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>           
                <ColumnModel ID="ColumnModel1" runat="server">
    		        <Columns>
                        <ext:RowNumbererColumn ID="RowNumbererColumn1" 
                            runat="server" 
                            Width="50" />
                        <ext:Column ID="Column1" 
                            runat="server" 
                            Text="Company" 
                            DataIndex="Company" 
                            Flex="1" />
                        <ext:Column ID="Column2" 
                            runat="server" 
                            Text="Price, $" 
                            DataIndex="Price" 
                            Width="70" 
                            Align="Center" />
                        <ext:Column ID="Column3" 
                            runat="server" 
                            Text="Last Update" 
                            DataIndex="LastUpdate" 
                            Width="140">
                            <Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
                        </ext:Column>
    		        </Columns>
                </ColumnModel>           
                <View>
                    <ext:GridView ID="GridView1" runat="server" TrackOver="false" />
                </View>                        
            </ext:GridPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>    </form>
    </body>
    </html>
    If this is the case, then one possible solution is to try applying BorderLayout to the viewport. This way, the top toolbar can be placed in the North region separately.
  3. #3

    Thanks Mimisss

    Thank you @Mimisss, as you suggested, after changing the layout of view-port to BorderLayout and applying region accordingly to other controls the problem is now disappeared. Thanks again.

Similar Threads

  1. Replies: 1
    Last Post: Sep 25, 2013, 11:13 AM
  2. Dynamically Freeze Grid Column
    By RCM in forum 2.x Help
    Replies: 0
    Last Post: Oct 02, 2012, 3:07 AM
  3. Replies: 6
    Last Post: Apr 18, 2012, 5:28 PM
  4. Grid Header Freeze
    By jordnlvr in forum 1.x Help
    Replies: 1
    Last Post: Mar 27, 2010, 3:52 AM
  5. Replies: 0
    Last Post: May 19, 2009, 5:16 AM

Tags for this Thread

Posting Permissions