Dec 16, 2015, 1:47 PM
[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]