[FIXED] [#1174] [4.0] Panel scrolling when inner select box is scrolled using keydown event

  1. #1

    [FIXED] [#1174] [4.0] Panel scrolling when inner select box is scrolled using keydown event

    In example below click on arrow button of the selectbox and use the keyboard arrows up and down to scroll the list of states. Note that the panel is scrolled too.


    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.SelectBox1.GetStore().DataSource = new object[]
            {
                new object[] { "AL", "Alabama", "The Heart of Dixie" },
                new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
                new object[] { "AZ", "Arizona", "The Grand Canyon State" },
                new object[] { "AR", "Arkansas", "The Natural State" },
                new object[] { "CA", "California", "The Golden State" },
                new object[] { "CO", "Colorado", "The Mountain State" },
                new object[] { "CT", "Connecticut", "The Constitution State" },
                new object[] { "DE", "Delaware", "The First State" },
                new object[] { "DC", "District of Columbia", "The Nation's Capital" },
                new object[] { "FL", "Florida", "The Sunshine State" },
                new object[] { "GA", "Georgia", "The Peach State" },
                new object[] { "HI", "Hawaii", "The Aloha State" },
                new object[] { "ID", "Idaho", "Famous Potatoes" },
                new object[] { "IL", "Illinois", "The Prairie State" },
                new object[] { "IN", "Indiana", "The Hospitality State" },
                new object[] { "IA", "Iowa", "The Corn State" },
                new object[] { "KS", "Kansas", "The Sunflower State" },
                new object[] { "KY", "Kentucky", "The Bluegrass State" }
            };
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.Net</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" ScriptMode="Debug" />
    
        <ext:Viewport runat="server">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
            </LayoutConfig>
            <Items>
                <ext:Container
                    runat="server"
                    StyleSpec="background:transparent;"
                    MarginSpec="0 0 10 0">
                    <LayoutConfig>
                        <ext:TableLayoutConfig Columns="3" />
                    </LayoutConfig>
                    <Defaults>
                        <ext:Parameter Name="Width" Value="200" Mode="Raw" />
                        <ext:Parameter Name="Height" Value="200" Mode="Raw" />
                        <ext:Parameter Name="BodyPadding" Value="10" Mode="Raw" />
                        <ext:Parameter Name="AutoScroll" Value="true" Mode="Raw" />
                        <ext:Parameter Name="Margin" Value="10" Mode="Raw" />
                    </Defaults>
                    <Items>
                        <ext:Panel runat="server" Title="Header icons">
                            <Items>
                                <ext:SelectBox
                                    ID="SelectBox1"
                                    runat="server"
                                    DisplayField="state"
                                    ValueField="abbr"
                                    EmptyText="Select a state...">
                                    <Store>
                                        <ext:Store runat="server">
                                            <Model>
                                                <ext:Model runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="abbr" />
                                                        <ext:ModelField Name="state" />
                                                        <ext:ModelField Name="nick" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                </ext:SelectBox>
                                <ext:Label runat="server">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida nibh, quis porttitor felis venenatis id. Nam sodales mollis
                                     quam eget venenatis. Aliquam metus lorem, tincidunt ut egestas imperdiet, convallis lacinia tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed 
                                    egestas gravida nibh, quis porttitor felis venenatis id. Nam sodales mollis quam eget venenatis. Aliquam metus lorem, tincidunt ut egestas imperdiet, 
                                    convallis lacinia tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida nibh, quis porttitor felis venenatis id. Nam sodales mollis
                                     quam eget venenatis. Aliquam metus lorem, tincidunt ut egestas imperdiet, convallis lacinia tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed 
                                    egestas gravida nibh, quis porttitor felis venenatis id. Nam sodales mollis quam eget venenatis. Aliquam metus lorem, tincidunt ut egestas imperdiet, 
                                    convallis lacinia tortor.
                                </ext:Label>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    And this fix works for me:

    <script>
            Ext.ux.SelectBox.override({
                initEvents: function () {
                    this.callParent();
    
                    this.inputEl.on('keydown', function (e) {
                        e.stopEvent();
                    });
                }
            });
    </script>
    But despite i already have found the fix above, i think this should be a bug.
    Last edited by Daniil; Dec 16, 2015 at 7:26 PM. Reason: [FIXED] [#1174] [4.0]
  2. #2
    Hi @RCN,

    Thank you for the report and sharing a workaround!

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/1174

    Fortunately, it is already fixed in Ext.NET 4.0 beta with ExtJS 6.0.1 upgrade.

Similar Threads

  1. Replies: 1
    Last Post: Mar 25, 2013, 3:36 AM
  2. Replies: 1
    Last Post: Jun 28, 2012, 9:39 PM
  3. [CLOSED] KeyDown and KeyPress Event
    By rosua in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 04, 2012, 11:43 AM
  4. [CLOSED] KeyDown Event Not Firing
    By JonG in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jun 04, 2010, 1:57 PM
  5. MultiHeader keydown event
    By methode in forum Open Discussions
    Replies: 5
    Last Post: Mar 04, 2009, 4:29 PM

Tags for this Thread

Posting Permissions