[CLOSED] Scroll position is lost for GridPanels within a TabPanel

  1. #1

    [CLOSED] Scroll position is lost for GridPanels within a TabPanel

    Hi,

    When adding new tabs with "iframe" autoload mode, I've noticed that the scrolling position of the grid is lost when switching tabs after row selection. To reproduce, load Tab 1, select a row near the bottom of the grid and load Tab 2. Switch back to Tab 1 to observe that the previous scrolling position is lost and the row is out of view although still selected.

    Parent.aspx

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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>Ext.Net 1.x</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
            var addTab = function (tabPanel, id, url) {
                var tab = tabPanel.getComponent(id);
    
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: url,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: "iframe",
                            maskMsg: "Loading " + url + "..."
                        }
                    });
    
                    tab.on("activate", function (p) {
                        var item = MenuPanel1.menu.items.get(id);
                        var body = p.getBody();
                        if (item) {
                            MenuPanel1.setSelection(item);
                        }
                    }, this);
                }
    
                tabPanel.setActiveTab(tab);
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Window ID="Window1" runat="server" Title="Adding tab" Width="700" Height="500"
                Icon="Link" Layout="border">
                <Items>
                    <ext:MenuPanel ID="MenuPanel1" runat="server" Width="200" Region="West">
                        <Menu ID="Menu1" runat="server">
                            <Items>
                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Tab 1">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                                <ext:MenuSeparator />
                                <ext:MenuItem ID="MenuItem2" runat="server" Text="Tab 2">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                                <ext:MenuSeparator />
                                <ext:MenuItem ID="MenuItem3" runat="server" Text="Tab 3">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" LayoutOnTabChange="true" HideMode="Offsets" EnableTabScroll="true">
                        <Plugins>
                            <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
                            <ext:TabScrollerMenu runat="server" PageSize="5">
                            </ext:TabScrollerMenu>
                        </Plugins>
                    </ext:TabPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Child.aspx

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", "Conglomerates", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", "Basic Materials", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", "Consumer Goods",  83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", "Financial", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", "Financial", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", "Technology", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", "Industrial", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", "Industrial", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", "Financial", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", "Basic Materials", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", "Energy", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", "Industrial", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", "Consumer", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", "Technology", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", "Industrial", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", "Technology", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", "Technology", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", "Consumer", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", "Financial", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", "Consumer", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", "Consumer", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", "Technology", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", "Consumer", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", "Consumer", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", "Consumer", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", "Consumer", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", "Industrial", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", "Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", "Consumer", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    
    </script>
    <!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>Ext.Net 1.x</title>
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            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>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel runat="server" Region="Center" Layout="BorderLayout">
                        <Items>
                            <ext:GridPanel ID="GridPanel1" runat="server" Region="North" StripeRows="true" Title="Array Grid"
                                TrackMouseOver="true" MinHeight="160" Height="280" AutoExpandColumn="company" Collapsible="false"
                                CollapseMode="Mini" SelectionMemory="Enabled" Split="true" AutoScroll="true"
                                Border="true">
                                <Store>
                                    <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="M/d hh:mmtt" />
                                                </Fields>
                                            </ext:ArrayReader>
                                        </Reader>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModel1" runat="server">
                                    <Columns>
                                        <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                                        <ext:Column Header="Price" DataIndex="price">
                                            <Renderer Format="UsMoney" />
                                        </ext:Column>
                                        <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                                            <Renderer Fn="change" />
                                        </ext:Column>
                                        <ext:Column Header="Change" DataIndex="pctChange">
                                            <Renderer Fn="pctChange" />
                                        </ext:Column>
                                        <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel runat="server" SingleSelect="true" />
                                </SelectionModel>
                            </ext:GridPanel>
                            <ext:Panel runat="server" ID="Panel1" Region="Center" Border="false" Layout="FitLayout" Title="Company Details" Icon="ApplicationEdit"
                                HideMode="Offsets">
                                <Items>
                                    <ext:FormPanel runat="server" LabelAlign="Left"
                                        Padding="10" ButtonAlign="Right" AutoScroll="false" Border="true" Frame="false"
                                        TrackResetOnLoad="true">
                                        <Items>
                                            <ext:TextField runat="server" FieldLabel="Company Name"></ext:TextField>
                                            <ext:TextField runat="server" FieldLabel="Last Updated"></ext:TextField>
                                        </Items>
                                        <BottomBar>
                                            <ext:Toolbar runat="server">
                                                <Items>
                                                    <ext:Button ID="ButtonEdit1" runat="server" Text="Edit" Icon="ApplicationEdit" Width="80">
                                                    </ext:Button>
                                                    <ext:ToolbarSeparator>
                                                    </ext:ToolbarSeparator>
                                                    <ext:Button ID="ButtonCancel1" runat="server" Text="Cancel" Icon="Cancel" Disabled="true"
                                                        ToolTip="Cancel" Width="80">
                                                    </ext:Button>
                                                    <ext:ToolbarSeparator>
                                                    </ext:ToolbarSeparator>
                                                    <ext:ToolbarFill>
                                                    </ext:ToolbarFill>
                                                </Items>
                                            </ext:Toolbar>
                                        </BottomBar>
                                    </ext:FormPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 06, 2014 at 7:15 AM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    It appears to depend on a browser. I reproduced it in FireFox and IE, but not in Chrome. Unpleasant behavior, but it doesn't look an Ext.NET issue for me, it might be something with browsers. I guess it might be even reproducible without Ext.NET. Though, not sure.

    In any way, I can suggest you to maintain a scroll position manually.
    Last edited by Daniil; Aug 05, 2014 at 3:28 PM.
  3. #3
    Thanks, Daniil. Would you have any suggestions how to maintain the scroll position manually?
  4. #4
    I would save a scroll position when a tab is deactivated and restore when it is activated again.
  5. #5
    Would it be the .restoreScroll() call on the GridView object instance? If you could provide a little example or a link on usage, I'd appreciate it.
  6. #6
    Here's the updated code sample. It doesn't do the trick, however.

    Edit in:
    I've got it to work somehow. You may close this thread down, thanks for the pointers!

    Parent.aspx

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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>Ext.Net 1.x</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
            var addTab = function (tabPanel, id, url) {
                var tab = tabPanel.getComponent(id);
    
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: url,
                        closable: true,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: "iframe",
                            maskMsg: "Loading " + url + "..."
                        }
                    });
    
                    tab.on("activate", function (p) {
                        var item = MenuPanel1.menu.items.get(id);
                        var body = p.getBody();
                        if (item) {
                            MenuPanel1.setSelection(item);
                        }
    
                        var state = body._state;
                        if (state && body.Ext) {
                            var grid = body.Ext.getCmp("GridPanel1");
                            grid.getView().suspendEvents();
                            grid.getView().restoreScroll(state);
                            grid.getView().resumeEvents();
                        }
                    }, this);
                }
    
                tabPanel.setActiveTab(tab);
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Window ID="Window1" runat="server" Title="Adding tab" Width="700" Height="500"
                Icon="Link" Layout="border">
                <Items>
                    <ext:MenuPanel ID="MenuPanel1" runat="server" Width="200" Region="West">
                        <Menu ID="Menu1" runat="server">
                            <Items>
                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Tab 1">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                                <ext:MenuSeparator />
                                <ext:MenuItem ID="MenuItem2" runat="server" Text="Tab 2">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                                <ext:MenuSeparator />
                                <ext:MenuItem ID="MenuItem3" runat="server" Text="Tab 3">
                                    <Listeners>
                                        <Click Handler="addTab(#{TabPanel1}, this.id, 'Child.aspx');" />
                                    </Listeners>
                                </ext:MenuItem>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" LayoutOnTabChange="true" HideMode="Offsets" EnableTabScroll="true">
                        <Plugins>
                            <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" />
                            <ext:TabScrollerMenu runat="server" PageSize="5">
                            </ext:TabScrollerMenu>
                        </Plugins>
                    </ext:TabPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    Child.aspx

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", "Conglomerates", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", "Basic Materials", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", "Consumer Goods",  83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", "Financial", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", "Financial", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", "Technology", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", "Industrial", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", "Industrial", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", "Financial", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", "Basic Materials", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", "Energy", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", "Industrial", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", "Consumer", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", "Technology", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", "Industrial", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", "Technology", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", "Technology", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", "Consumer", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", "Financial", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", "Consumer", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", "Consumer", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", "Technology", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", "Consumer", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", "Consumer", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", "Consumer", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", "Consumer", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", "Industrial", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", "Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", "Consumer", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    
    </script>
    <!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>Ext.Net 1.x</title>
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            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 + "%");
            };
    
            var onBodyScroll = function (scrollLeft, scrollTop) {
                var state = { left: scrollLeft, top: scrollTop };
                window._state = state;
            };
        </script>
    </head>
    <body>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel runat="server" Region="Center" Layout="BorderLayout">
                        <Items>
                            <ext:GridPanel ID="GridPanel1" runat="server" Region="North" StripeRows="true" Title="Array Grid"
                                TrackMouseOver="true" MinHeight="160" Height="280" AutoExpandColumn="company" Collapsible="false"
                                CollapseMode="Mini" SelectionMemory="Enabled" Split="true" AutoScroll="true"
                                Border="true">
                                <Store>
                                    <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="M/d hh:mmtt" />
                                                </Fields>
                                            </ext:ArrayReader>
                                        </Reader>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModel1" runat="server">
                                    <Columns>
                                        <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                                        <ext:Column Header="Price" DataIndex="price">
                                            <Renderer Format="UsMoney" />
                                        </ext:Column>
                                        <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                                            <Renderer Fn="change" />
                                        </ext:Column>
                                        <ext:Column Header="Change" DataIndex="pctChange">
                                            <Renderer Fn="pctChange" />
                                        </ext:Column>
                                        <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel runat="server" SingleSelect="true" />
                                </SelectionModel>
                                <Listeners>
                                    <BodyScroll Fn="onBodyScroll" />
                                </Listeners>
                            </ext:GridPanel>
                            <ext:Panel runat="server" ID="Panel1" Region="Center" Border="false" Layout="FitLayout" Title="Company Details" Icon="ApplicationEdit"
                                HideMode="Offsets">
                                <Items>
                                    <ext:FormPanel runat="server" LabelAlign="Left"
                                        Padding="10" ButtonAlign="Right" AutoScroll="false" Border="true" Frame="false"
                                        TrackResetOnLoad="true">
                                        <Items>
                                            <ext:TextField runat="server" FieldLabel="Company Name"></ext:TextField>
                                            <ext:TextField runat="server" FieldLabel="Last Updated"></ext:TextField>
                                        </Items>
                                        <BottomBar>
                                            <ext:Toolbar runat="server">
                                                <Items>
                                                    <ext:Button ID="ButtonEdit1" runat="server" Text="Edit" Icon="ApplicationEdit" Width="80">
                                                    </ext:Button>
                                                    <ext:ToolbarSeparator>
                                                    </ext:ToolbarSeparator>
                                                    <ext:Button ID="ButtonCancel1" runat="server" Text="Cancel" Icon="Cancel" Disabled="true"
                                                        ToolTip="Cancel" Width="80">
                                                    </ext:Button>
                                                    <ext:ToolbarSeparator>
                                                    </ext:ToolbarSeparator>
                                                    <ext:ToolbarFill>
                                                    </ext:ToolbarFill>
                                                </Items>
                                            </ext:Toolbar>
                                        </BottomBar>
                                    </ext:FormPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by vadym.f; Aug 05, 2014 at 7:54 PM.

Similar Threads

  1. [CLOSED] [#529] MultiSelect scroll position is not getting maintianed
    By PriceRightHTML5team in forum 2.x Premium Help
    Replies: 5
    Last Post: Aug 06, 2014, 4:36 AM
  2. Infinite scroll and scroll bar position
    By oooh in forum 2.x Help
    Replies: 2
    Last Post: Apr 14, 2014, 7:49 PM
  3. Replies: 11
    Last Post: Aug 06, 2013, 5:29 AM
  4. [CLOSED] TreeGrid scroll position after refresh
    By agonzalez in forum 1.x Premium Help
    Replies: 6
    Last Post: Mar 14, 2013, 3:14 PM
  5. BUG - tabPanel with 2 gridpanels
    By RPIRES in forum 1.x Help
    Replies: 0
    Last Post: Jul 01, 2010, 6:15 PM

Tags for this Thread

Posting Permissions