Results 1 to 7 of 7

Thread: Ext JS combo box

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2011
    Posts
    5

    Question Ext JS combo box

    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.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2011
    Posts
    5

    Default like html combo box

    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.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Quote Originally Posted by deiveehan View Post
    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.

    Quote Originally Posted by deiveehan View Post
    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2011
    Posts
    5

    Default

    Thanks a lot for your quick response.
    Quote Originally Posted by skirtle View Post
    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....ryhtml_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 dont want to use a combo-box, as a text box shouldnt be shown and the user shouldnt 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.

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Based on the example you provided I've tried to simulate it using an ExtJS combobox. Seems to work OK for me.

    Code:
    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));
                }
            }
        }
    });

  7. #7
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    86
    Answers
    2

    Default

    I think if you add this to the above code you may get close to what you are looking for.

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •