How to add an empty value to ComboBox

[Sophos]

Hi, I want to add an empty value in the dropdown to the combobox. I have tried with “” and “ “ but they don’t work. Thanks in advance

[Arno.Nyhm]

what you mean exacty?

a) an empty row? maybe you need to place an extra css to get a good heigt
b) maybe a combo.reset() or comboBox.clearSelections() ?

pls show your current code of the combobox.

[Feltros]

If its for a ComboBox where you want to make one of the options non-applicable what about using "N/A" ? Alternatively - as Arno says if you clear the selection then a combobox will display emptiness (or so long as you haven't box.setValue(something) then it will by default be empty).

[Sophos]

Hi guys, Thanks for the responses. This is the solution I used:

package com.example.mywebapp.client;

import java.util.ArrayList;

import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class TestGxt implements EntryPoint {
    public class ComboBoxExample extends LayoutContainer {

        public ComboBoxExample() {
            VerticalPanel vp = new VerticalPanel();
            vp.setSpacing(10);

            ArrayList<BaseModelData> alLanguage = new ArrayList<BaseModelData>();
            BaseModelData mdLanguageData;
            mdLanguageData = new BaseModelData();
            mdLanguageData.set("text", "");
            alLanguage.add(mdLanguageData);
            mdLanguageData = new BaseModelData();
            mdLanguageData.set("text", "Fran");
            alLanguage.add(mdLanguageData);
            mdLanguageData = new BaseModelData();
            mdLanguageData.set("text", "Nederlands");
            alLanguage.add(mdLanguageData);

            ListStore<BaseModelData> states = new ListStore<BaseModelData>();
            states.add(alLanguage);

            ComboBox<BaseModelData> combo = new ComboBox<BaseModelData>();
            combo.setEmptyText("Select a state...");
            combo.setDisplayField("text");
            combo.setTemplate(getTemplate());
            combo.setWidth(150);
            combo.setStore(states);
            combo.setTypeAhead(true);
            combo.setTriggerAction(TriggerAction.ALL);
            vp.add(combo);
            add(vp);
        }

        private native String getTemplate() /*-{ 
            return  [ 
            '<tpl for=".">', 
            '<tpl if="text == \'\'">',
            '<div class="x-combo-list-item" qtip="N/A" qtitle=""></BR></div>', 
            '</tpl>',
            '<tpl if="text != \'\'">',
            '<div class="x-combo-list-item" qtip="{text}" qtitle="">{text}</div>',  
              '</tpl>',
            '</tpl>' 
            ].join(""); 
            }-*/;
    }

    public void onModuleLoad() {
        RootPanel.get().add(new ComboBoxExample());
    }
}

[Arno.Nyhm]

thanks for sharing your solution :-)

i see you solved the problem of small empty lines with the </br> tag :-)

[ken_opp]

This template causes every entry in my combobox to look blank. If you select one of the blank entries, the value will correctly show, but you're guessing which entry to pick. Here's what I have:

xtype: 'combo',
fieldLabel: 'Status',
triggerAction: 'all',
typeAhead: false,
id: 'cboSearchStatusId',
hiddenName: 'cboSearchStatusValue',
displayField: 'Name',
valueField: 'TicketStatusId',
store: storeSearchStatus,
mode: 'local',
editable: true,
forceSelection: true,
tpl:'<tpl for=".">' +
'<div class="x-combo-list-item">' +
'{text}&nbsp;' +
'</div></tpl>'

[blay]

No, the template is valid, but I guess you should change this:

'<div class="x-combo-list-item" qtip="{text}" qtitle="">{text}</div>',

because that should be the displayField of your comboBox and if your apply that template as it is written, it probably will fail for you

[ken_opp]

Yes, sorry, that wasn't obvious to me. I found another post that said
tpl: '<tpl for="."><div class="x-combo-list-item">{myDisplayField:defaultValue("&nbsp;")}</div></tpl>'And I'd like to add:

Where myDisplayField is the value specified by the "displayField" property of your combobox.