[CLOSED] SelectBox in 2.0 does not behave the same as 1.X & other ComboBox ramblings

I thought the point of SelectBox was to have a control that was more classic windows forms style whereby when you pressed the first letter of an entry in the list, you'd autocomplete with the next entry that matched in the list with the first letter you typed, and if you type it again, it'd find the next one if one exists. In 2.X that is not the case. That no longer works. Try in the examples if you don't believe me.

[Sidenote] Actually true Windows Forms would allow type-ahead of a few characters and only move to next if you click the same letter twice and none match with redundant characters in the list.

I've pushed this topic to the back-burner but now it's time to figure out how to get an acceptable combobox because I can't seem to find the right combination of attributes to get any acceptable behavior.

With a combobox with these attributes Editable="true" ForceSelection="true" TypeAhead="true" QueryMode="Local" I can get close to a behavior I can live with but unfortunately if you type a selection that is not in the list, even though ForceSelection is true, it'll still trigger the listener even though it resets back to the original value. That's not acceptable. In some cases that will mean reloading the page.

My requirements are that I need to be able to at least type a first character and have the combobox select something automatically even if the list has not been pulled down.

Any thoughts how I can gain this ability? I'm running out of permutations.

Hi @michaeld,

We are going to check the statements. Then we will back to you.

Hello!

Sorry, but I don't quite follow you, could you clarify some points.

Quote:

Originally Posted by michaeld

With a combobox with these attributes Editable="true" ForceSelection="true" TypeAhead="true" QueryMode="Local" I can get close to a behavior I can live with but unfortunately if you type a selection that is not in the list, even though ForceSelection is true, it'll still trigger the listener even though it resets back to the original value. That's not acceptable. In some cases that will mean reloading the page.

This combination of attributes should work in your case. However, I don't clearly understand your requirements. You mentioned some listener, could you clarify what listener?

Quote:

Originally Posted by michaeld

My requirements are that I need to be able to at least type a first character and have the combobox select something automatically even if the list has not been pulled down.

Is the ComboBox's store loaded, when you type some chars?

Quote:

Originally Posted by Baidaly

Sorry, but I don't quite follow you, could you clarify some points.
This combination of attributes should work in your case. However, I don't clearly understand your requirements. You mentioned some listener, could you clarify what listener?

I'm working on a sample to reflect. I'll have it in an hour.

Quote:

Originally Posted by Baidaly

Is the ComboBox's store loaded, when you type some chars?

I have both cases. I'll try to reflect both in a sample coming ahead.

However, you cannot deny that original topic about SelectBox differences between 1.X and 2.0. Go to the examples explorers and test for yourself.

(Edit)
I would be happy if I could get the original SelectBox 1.X functionality back. In 1.X, if you tab to focus on the SelectBox and press 'C' before the pulldown appears, it will select California. If you do the same in 2.X, it will not. Both behave correctly if the pulldown is open. Fix this issue and I'm golden. The other problem is that once you click the 'C' in either, select is triggered and if the event causes a refresh of the page before you've had a chance to choose another list item in 'C', that's the problem I'm having. I guess I'll experiment with Blur and check isDirty(). The problem with that is I'd like the click on a selection to to have the same effect. That's where I'm having problems.

(See edit in last post regarding SelectBox)

I'm just going to go over a bunch of things, some have come up in the past.

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <!DOCTYPE html> <html> <head id="Head1" runat="server"> <title>Test34</title> </head> <body> <form id="Form1" runat="server"> <ext:ResourceManager ID="ResourceManager1" runat="server" ViewStateMode="Enabled" ScriptMode="Debug" SourceFormatting="true" /> <ext:Viewport ID="vp" runat="server" Layout="VBoxLayout"> <LayoutConfig> <ext:VBoxLayoutConfig Align="Stretch" /> </LayoutConfig> <Items> <ext:Panel runat="server" Flex="1" Title="test" Layout="FormLayout"> <Items> <ext:ComboBox ID="CB1" runat="server" AutoFocus="true" ForceSelection="true" TypeAhead="true" QueryMode="Local" Width="80" TriggerAction="Query" > <SelectedItems> <ext:ListItem Value="B Select" /> </SelectedItems> <Items> <ext:ListItem Text="A Select" Value="A Select" /> <ext:ListItem Text="B Select" Value="B Select" /> <ext:ListItem Text="BB Select" Value="BB Select" /> <ext:ListItem Text="C Select" Value="C Select" /> <ext:ListItem Text="CD Select" Value="CD Select" /> <ext:ListItem Text="D Select" Value="D Select" /> <ext:ListItem Text="D Select" Value="D Select" /> <ext:ListItem Text="F Select" Value="F Select" /> </Items> <Listeners> <Select Handler="alert('select1');" /> <Change Handler="alert('change1');" /> </Listeners> </ext:ComboBox> <ext:Button OnClientClick="#{CB2}.show();#{CB2}.setDisabled(false);" Text="Show CB2" /> <ext:ComboBox ID="CB2" runat="server" Editable="false" ForceSelection="true" Width="80" Hidden="true" Disabled="true"> <SelectedItems> <ext:ListItem Value="B Select" /> </SelectedItems> <Items> <ext:ListItem Text="A Select" Value="A Select" /> <ext:ListItem Text="B Select" Value="B Select" /> <ext:ListItem Text="BB Select" Value="BB Select" /> <ext:ListItem Text="C Select" Value="C Select" /> <ext:ListItem Text="CD Select" Value="CD Select" /> <ext:ListItem Text="D Select" Value="D Select" /> <ext:ListItem Text="D Select" Value="D Select" /> <ext:ListItem Text="F Select" Value="F Select" /> </Items> <Listeners> <Select Handler="alert('select2');" /> <Change Handler="alert('change2');" /> </Listeners> </ext:ComboBox> <ext:TextField runat="server" Text="Text"> <Listeners> <Change Handler="alert('text');" /> </Listeners> </ext:TextField> </Items> </ext:Panel> </Items> </ext:Viewport> </form> </body> </html>

First thing to note. (1) Even though Selected Items is in the initialization, we still get a change event and change1 is alerted. (2) Then to make matters worse, even the hidden/disabled change2 is as triggered as well. Using Text or Value or both in the SelectedItems List Items makes no difference. The only way to prevent this is to instead set Text="B Select". Okay, I get it (sorta) but it doesn't make sense to have any initialize element fire when no other time does it. The Select Event didn't, and yet selection was enforced. (3)Moreover, if you set Text="123", change fires. I guess because ForceSelection sets the value to empty after failing to match an item in the list. Still, set Text in a TextField and no change is ever fired. Inconsistency!!!!! Initialization events shouldn't fire.

Second thing to note, I set autofocus on CB1 so you should be able to start typing, say a letter 'c'. (4)Immediately I get change1 alerted, yet force selection hasn't selected the first item from 'C Select' from the list. Ok, fine, I have editable on. I press space after, and no change event. That's interesting for sure. Press another space. change1 sometimes fired, then an 's'. change1 fired. I'm moving towards completing "c select". Okay, still no query selection. I tab out, and it restores the original "B Select" value. Argh. So I consider, okay it's case sensitive and Try again. I enter "C". No difference. Then I realize, okay, so this isn't working so I remove the change listener on CB1 altogether and behavior changes. (5)BTW, the issue with space happens in the TextField as well. Sometimes I see the alert come up for an instant then removes immediately. Strange. I suspect a suspend after a trim in the js.

I start over after removing the change listener from CB1. Refresh the page, type 'c'. Ah ha! "C Select" is revealed. Tab away and select1. Yay. Desired behavior returned, but only when I remove the change listener. So apparently alert thwarts my test. I tried Change Handler=";" and behavior is good as well. I don't know what to think of this but is the alert suspending events?

(6) Now to talk about other nuances of unexpected behavior. I start in CB1. I click Left, Right, Home and End buttons. All behave within the TextField portion of CB1. Great. I click down arrow and pulldown appears. Now only Left and Right work in the text field but Home and End apply to the pulldown query. The thing is, I'd expect that only to occur when I click up and down to switch focus to the pulldown which I haven't done yet. Moreover, when I'm in the pulldown if I type a letter, text goes to the textfield instead of allowing me to select an item based the first letter typed in the pulldown where I expect focus. This makes the behavior very different from Windows Forms but quite cool if we're using query. I expect focus between the text field and the pulldown to relate to where I set focus so query won't do justice for my needs. Not ideal.

So I start playing with CB2 without the query and with Editable false and Force Selection true. I also remove the change event. I push the button to turn it on. First problem now is I can't select any items unless the trigger is down. So I press down or click on the pulldown trigger. I type a letter, nada. No selection available. So I add Query="Local". No difference. AutoSelect="true" neither. Hmmm. There seems to be no way to select items by typing. I remove Query and add TypeAhead="true". No difference. I try with editable and behavior returns to the same issues I had with CB1.

It gets significantly more complicated when I populate the ComboBox on focus. I'll try to share an example there.

Extjs reports:

Uncaught Ext.form.field.ComboBox.initComponent(): If typeAhead is enabled the combo must be editable: true -- please change one of those settings.

Code:

<ext:SelectBox ID="Gender" runat="server" FieldLabel="Gender" AllowBlank="false" Editable="true" ForceSelection="true" TypeAhead="true" EmptyText="Gender you identify with" SubmitValue="true" Width="380"> <Items> <ext:ListItem Text="Male" Value="M" /> <ext:ListItem Text="Female" Value="F" /> </Items> <Listeners> <focus handler="this.onTriggerClick();" /> </Listeners> </ext:SelectBox>

I'm pretty sure I set Editable="true".

Quote:

Originally Posted by michaeld

I thought the point of SelectBox was to have a control that was more classic windows forms style whereby

It rather emulates an HTML SELECT input.

Quote:

Originally Posted by michaeld

I thought the point of SelectBox was to have a control that was more classic windows forms style whereby when you pressed the first letter of an entry in the list, you'd autocomplete with the next entry that matched in the list with the first letter you typed, and if you type it again, it'd find the next one if one exists. In 2.X that is not the case. That no longer works. Try in the examples if you don't believe me.

Yes, it was broken. Please try this fix.

Fix

Code:

Ext.ux.SelectBox.override({ constructor: function (config) { this.searchResetDelay = 1000; config = config || {}; config = Ext.apply(config || {}, { editable: false, forceSelection: true, rowHeight: false, lastSearchTerm: false, triggerAction: "all", queryMode: "local" }); Ext.ux.SelectBox.superclass.constructor.call(this, config); this.lastSelectedIndex = this.selectedIndex || 0; this.on("select", function (combo, records) { this.lastSelectedIndex = this.getStore().indexOf(records[0]) + 1; }); }, onSelect : null, focusAndSelect : function (record) { record = Ext.isNumber(record) ? this.store.getAt(record) : record; this.ignoreSelection++; this.picker.clearHighlight(); this.picker.select(record); this.ignoreSelection--; this.picker.listEl.scrollChildIntoView(this.picker.getNode(record), false); this.setValue([record], false); this.fireEvent('select', this, [record]); this.inputEl.focus(); } });

Quote:

Originally Posted by michaeld

Extjs reports:

Uncaught Ext.form.field.ComboBox.initComponent(): If typeAhead is enabled the combo must be editable: true -- please change one of those settings.

Code:

<ext:SelectBox ID="Gender" runat="server" FieldLabel="Gender" AllowBlank="false" Editable="true" ForceSelection="true" TypeAhead="true" EmptyText="Gender you identify with" SubmitValue="true" Width="380"> <Items> <ext:ListItem Text="Male" Value="M" /> <ext:ListItem Text="Female" Value="F" /> </Items> <Listeners> <focus handler="this.onTriggerClick();" /> </Listeners> </ext:SelectBox>

I'm pretty sure I set Editable="true".

An HTML select element is not editable. So, a SelectBox is not editable as well. If you need editing, you should turn to a ComboBox for sure.

Before looking at the ComboBox issues, I would like to sort out the issues with a SelectBox.

Quote:

Originally Posted by Daniil

Yes, it was broken. Please try this fix.

Will this make it into SVN or were you hoping I could test this out first?

I still cannot use a SelectBox with a Select listener until I can figure out a way to detect if the select was caused by a key click or from a mouse-click. My listener refreshes the page using the value selected. In a ComboBox selection isn't triggered until blur. With a SelectBox, the first key typed that matches the first letter of an item in the list will cause the refresh even if there are other values starting with the same letter. If I use blur to cause this effect, then I lose the ability to allow them to use the mouse to click the item. See the problem?

Thanks. We'll discuss ComboBox next.