Mar 22, 2013, 6:58 PM
[CLOSED] SelectBox tab to focus and select issue
Hello,
I have a form with data entry fields, one of the fields is a Select Box that I want the user to be able to type a letter and the SelectBox options will display with first matching item selected. If the user mouse clicks on the SelectBox it works fine, But if you Tab through the fields to the SelectBox and type a letter an error is thrown: 'this.picker.listEl' is null or not an object
Seems tabbing to the box isn't initializing the 'pick list', is there a way to make that happen? Here's my example page
I have a form with data entry fields, one of the fields is a Select Box that I want the user to be able to type a letter and the SelectBox options will display with first matching item selected. If the user mouse clicks on the SelectBox it works fine, But if you Tab through the fields to the SelectBox and type a letter an error is thrown: 'this.picker.listEl' is null or not an object
Seems tabbing to the box isn't initializing the 'pick list', is there a way to make that happen? Here's my example page
<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
boxStore.DataSource = myData;
selBox1.SelectedItems.Add(new Ext.Net.ListItem() { Value = "L" });
}
}
private List<object> myData
{
get
{
List<object> box = new List<object>
{ new { Descr = "Consumer", Code = "L" },
new { Descr = "Consumer Suppress", Code = "Q" },
new { Descr = "Business", Code = "N" },
new { Descr = "Business Suppress", Code = "R" },
new { Descr = "Canadian Consumer", Code = "C" },
new { Descr = "Canadian Consumer Suppress", Code = "W" },
new { Descr = "Other / Backend", Code = "O" },
new { Descr = "Zip Tape", Code = "Z" }
};
return box;
}
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:FormPanel ID="FormPanel1" runat="server" Layout="TableLayout" Title="Test Panel" BodyPadding="10" Width="500">
<LayoutConfig>
<ext:TableLayoutConfig Columns="2"></ext:TableLayoutConfig>
</LayoutConfig>
<Items>
<ext:TextField ID="txt1" runat="server" FieldLabel="Text 1" AllowBlank="false"></ext:TextField>
<ext:TextField ID="txt2" runat="server" FieldLabel="Text 2" AllowBlank="false"></ext:TextField>
<ext:SelectBox ID="selBox1" runat="server" FieldLabel="Select Box" DisplayField="Descr" ValueField="Code" Size="20">
<Store>
<ext:Store ID="boxStore" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Descr"></ext:ModelField>
<ext:ModelField Name="Code"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Descr" Direction="ASC"></ext:DataSorter>
</Sorters>
</ext:Store>
</Store>
</ext:SelectBox>
</Items>
</ext:FormPanel>
</form>
</body>
</html>
Last edited by Baidaly; Mar 27, 2013 at 9:12 PM.
Reason: [CLOSED]
