PDA

View Full Version : [CLOSED] SelectBox tab to focus and select issue



jwhitmire36
Mar 22, 2013, 6:58 PM
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



<%@ 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>

Baidaly
Mar 22, 2013, 10:12 PM
Hello!

Temporarily use the following overriding:



Ext.override(Ext.ux.SelectBox, {
focusAndSelect : function (record) {
record = Ext.isNumber(record) ? this.store.getAt(record) : record;
this.ignoreSelection = true;
this.picker.select(record);
this.ignoreSelection = false;

if (this.picker.listEl)
this.picker.listEl.scrollChildIntoView(this.picker .getNode(record), false);

this.setValue([record], false);
this.fireEvent('select', this, [record]);
this.inputEl.focus(false, 500);
}
});


Or you can use the following ComboBox:



<ext:ComboBox ID="selBox1" runat="server" FieldLabel="Select Box" DisplayField="Descr" ValueField="Code" Size="20" MinChars="1" AutoSelect="True" TypeAhead="True">
<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:ComboBox>


We are investigating.

Baidaly
Mar 25, 2013, 1:26 AM
Related thread: http://forums.ext.net/showthread.php?24066

Daniil
Mar 25, 2013, 6:06 AM
Hello,

The bug has been fixed in SVN trunk and will be included into the next release.

Searching on key will occur only if a SelectBox is expanded.

If you need to get it expanded when it gets focus after pressing the Tab key inside a previous field, please set up this Focus listener for a SelectBox.

<Focus Handler="this.onTriggerClick();" />

jwhitmire36
Mar 25, 2013, 9:20 PM
I didn't get the combobox example from Baidaly to work, but did the Focus listener. Unfortunately it has a little quirk in IE8 which my user base has to use. If you tab to the selectbox the list expands just fine, but if you mouse click in the text box area(not the trigger) the list expands for just a second then goes away, and this is only the First time you click, if you click a second time it stays expanded. It works fine in Chrome though.

Once I get to a good point in my development I will update to the latest SVN code.

Thanks,
JW

Baidaly
Mar 25, 2013, 10:44 PM
Try to add buffer:


<Focus Handler="this.onTriggerClick();" Buffer="100" />

jwhitmire36
Mar 26, 2013, 5:54 PM
seems the Focus trigger is closing the selection list, if I set
<Focus Handler="this.onTriggerClick();" Buffer="1000"></Focus>
the select list expands for a second then it closes, so it's there for however long you set the buffer. Probably need a way to detect if the list is expanded already and cancel out

JW

Baidaly
Mar 26, 2013, 9:21 PM
You can use the following approach but we will not be collapse by clicking on combobox, only on blur or trigger click:



Focus Handler="
this.mun(this.inputEl, 'click', this.onTriggerClick, this);
this.onTriggerClick();
" />

Daniil
Mar 27, 2013, 4:48 AM
I would also try the following Focus listener.

<Focus Handler="if (!this.isExpanded) { this.onTriggerClick(); }" Delay="200" />

jwhitmire36
Mar 27, 2013, 6:16 PM
I would also try the following Focus listener.

<Focus Handler="if (!this.isExpanded) { this.onTriggerClick(); }" Delay="200" />

Perfect! Thanks a lot, you can close this ticket.

JW

Daniil
Oct 15, 2013, 4:44 AM
The bug has been fixed in SVN trunk and will be included into the next release.

Searching on key will occur only if a SelectBox is expanded.


It conflicts with a SelectBox's destination. Its destination is to emulate an HTML select element. It does searching if a drop down list is not expanded. I will revert this change back and commit another fix to avoid a JavaScript on key with a non-expanded drop down list.

Here is a related post.
http://forums.ext.net/showthread.php?26765&p=119112&viewfull=1#post119112