ExtJS 4 – clear/reset combobox

Surprisingly there is no native way to reset the value of a combo box. Once the user selects something in it, it can’t go back to ‘clear’ state. From this moment on the user can change the value with some other value, but can’t remove it at all. It is possible to use .setValue(”) on the ComboBox component to clear it programatically. But how exactly would you do it? Some people put additional form button with on click handler that finds the combo and .setValue-s it to empty. Other mix the combo with triggerfield and create another trigger that does the same.

These are all nice options, but are completely useless when it comes to the user’s uncanny ability to mess things up. I’ve seen a tons of users that do the following:
1. select some option in the combo
2. say ‘oh, I do not need this here’
3. mark the text in the combo’s textfield and delete it
4. hit submit
What is wrong here? The actual combo value is not dependant of the displayed text. If you remove the text, the value is still there, hidden behind the scene. And when you submit that form, the old combo value will be there and will be send to the server. And users do it all the time, it doesn’t matter if there is a big red button right next to the field that says “clear that combo”.

The easier solution for all these problems is to play along with the user. Make the combo clear its value when the text from the textfield is removed. It is not that complicated:

{
    xtype: 'combo',
    name: 'department_id',
    fieldLabel: 'Department',
    store: me.getDepartmentStore(),
    displayField: 'name',
    valueField: 'id',
    enableKeyEvents: true,
    listeners: {
        keyup: function(cmp){
            if (cmp.lastValue == ''){
                cmp.lastValue('');
            }
        }
    }
}

ComboBox is descendant of Ext.form.Field.Text so you can use its key events. When the user presses BACKSPACE or DEL to remove the text, the keyup event will fire and it will check the lastValue property. Both `rawValue` and `lastValue` hold the actual text in the textfield, so if this property is empty the combo should be cleared.

Tags: , ,

6 Responses to “ExtJS 4 – clear/reset combobox”

  1. Всъщност защо пояснителния текст ще се появява в текстово поле, още повече така, че да може да бъде изтрит? Аз никога не бих го направил така…

  2. ivanatora says:

    То не е пояснителен текст, ами е текстовото представяне на избраната опция. Както в обикновен HTML select таг като избереш някой option и в тялото на селекта се показва текста.
    Ако въпросът е “защо може да се пише в това поле” – защото ComboBox има функция да търси и филтрира възможните опции. Ако имаш списък с всички градове по света, няма да е удачно да изсипеш 2000000 записа в един drop down, за това започваш с празен списък, юзъра започва да пише “С” и му се показват само тези, които започват със “С”.

  3. Тогава го направи с разделяне на подмножества. Първи dropdown с континент, втори с държава от този континент, трети с градове. Това от примера.

    Още един вариант – нека може да пише, ок, но в момента, в който “цъкне” и си избере град – текстовото поле става “disabled” и вече в него не може да се промена нищо. Може да се появи допълнително линкче с бутон “edit” до него, което има функция на Reset за формата.

  4. ivanatora says:

    Не става дума за конкретен пример, а за принципните възможности на компонента. Филтрирането е важен feature. Не можем да забраним текстовото поле след избор, защото потребителя все още трябва да има възможност да смени избора и да използва филтрирането.

    Това с ресет бутона сме го пробвали. Понякога юзърите се сещат да го цъкнат, но в повечето случаи само трият текста от полето и си мислят че са “ресетнали” компонента :/ Целевата група потребители не може да се каже че е особено компютърно грамотна.

  5. AA says:

    Ами то като е сетнато да е форс селекшън.. пак ли ти дава да го триеш?

  6. ivanatora says:

    С `forceSelection: true` все още можеш да триеш съдържанието на текстовото поле.
    С `editable: false` вече не можеш.

Leave a Reply