PDA

View Full Version : Ext JS combo box



deiveehan
24 Nov 2011, 5:16 AM
Hi - Ext JS combo box allows the user to type the entries so that the user can quickly navigate to the item in the list. But it also allows the user to type values other than the items in the list. (i.e., If the combo box contains all the countries including "India, Iran, Iraq", it should allow you to type only 'In' or 'Ir', but it allows to type 'Ia' and then displays an empty list, Is there any way to avoid this, so that the user will be able to type only items that is present in the list. I tried this by implementing manually using the change even in the ExtJS combo box, but the combo box flickers in doing that. Any feature/attributes in Ext JS which will make it work. Thanks,Deiveehan.

skirtle
24 Nov 2011, 5:59 AM
There isn't any such setting. editable: false and forceSelection: true are the closest you'll get. typeAhead: true might also be helpful.

I'm not convinced this is actually possible, not in a user-friendly way. There's no reason why a user has to type in a value in the obvious order. If, for example, the text currently says 'an' and the user wants to type in 'Iran' then trying to limit typing in the way you describe would force them to delete the current text and start again.

deiveehan
25 Nov 2011, 2:24 AM
It would be much more friendlier to the user if we restrict the user in entering values that will bring no result (i.e., an empty list). - like a regular html combo box. (In a regular html combo box, the user cannot key in a value that does not exist in the values list).

I tried to use change event to capture what the user entered - iterate through the list and if the value in the list does not start with what the user entered, then I removed the last keyed in value. But it flickers - wanted to check if Ext JS provides any feature out of the box.

skirtle
25 Nov 2011, 2:44 AM
It would be much more friendlier to the user if we restrict the user in entering values that will bring no result (i.e., an empty list). - like a regular html combo box. (In a regular html combo box, the user cannot key in a value that does not exist in the values list).

I'm not familiar with the behaviour you're describing for an 'HTML combobox'. A HTML select element usually behaves the same way as a combobox with editable: false, not allowing typing at all. An HTML 5 datalist element is comparable to a combobox with editable: true but that doesn't restrict what the user types to one of the options in the way you describe.


I tried to use change event to capture what the user entered - iterate through the list and if the value in the list does not start with what the user entered, then I removed the last keyed in value. But it flickers - wanted to check if Ext JS provides any feature out of the box.

It does not.

deiveehan
28 Nov 2011, 4:40 AM
Thanks a lot for your quick response.

I'm not familiar with the behaviour you're describing for an 'HTML combobox'.

In a standard html box, the user will be able to still type the characters to go to the right element.
Example: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2
Type 'F' after you focus on the combo box. It will move the focus to the 'Fiat'.
whereas if I set the editable to 'false' in Ext JS combo box, the user is not even able to key in anything.

Is there a way to implement a standard drop down list in Ext-JS? I don’t want to use a combo-box, as a text box shouldn’t be shown and the user shouldn’t be able to type in arbitrary values. Behaviour should be consistent with a standard windows drop down list: clicking anywhere on the control should drop down the list, typing the beginning letters of a list item should select the item.

skirtle
28 Nov 2011, 6:30 AM
Based on the example you provided I've tried to simulate it using an ExtJS combobox. Seems to work OK for me.


Ext.create('Ext.form.field.ComboBox', {
editable: false,
enableKeyEvents: true,
renderTo: Ext.getBody(),
store: ['Volvo', 'Saab', 'Fiat', 'Audi'],
listeners: {
keyup: function(combo, event) {
var key = String.fromCharCode(event.getKey()),
boundList = combo.getPicker(),
store = boundList.getStore();

var record = store.findRecord(combo.displayField, key);

if (record) {
boundList.highlightItem(boundList.getNode(record));
}
}
}
});

bobmanc
28 Nov 2011, 12:43 PM
I think if you add this to the above code you may get close to what you are looking for.



editable: true,
forceSelection:true,
typeAhead:true,