View Full Version : How to add an empty value to ComboBox

27 Aug 2009, 11:28 PM
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

28 Aug 2009, 10:58 AM
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.

28 Aug 2009, 11:20 AM
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).

1 Sep 2009, 12:21 AM
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();

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

ListStore<BaseModelData> states = new ListStore<BaseModelData>();

ComboBox<BaseModelData> combo = new ComboBox<BaseModelData>();
combo.setEmptyText("Select a state...");

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

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

1 Sep 2009, 4:26 AM
thanks for sharing your solution :-)

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

30 Mar 2011, 8:22 AM
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;' +

30 Mar 2011, 8:44 AM
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

30 Mar 2011, 8:48 AM
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.

14 Feb 2013, 6:32 PM
Instead of adding an empty value, i added <br/> as a value in combo.
And while selecting this value, i just clear the field value so that, <br/> doesn't appear inside the combo field on selection changed to empty value.

28 Mar 2013, 3:21 AM
I just added a row in the combo's store with a empty string field configured as valueField in the combo, and i added this CSS rule to my project:

.x-boundlist-item {
min-height: 20px;

30 Jun 2014, 10:26 AM
How to add items to the drop down list based on the selection of the item from the drop down list of other combo box? For Example, if in country combo box, USA is selected then it State combo box california, Texas should be displayed in its drop down list or if India is selected from country combo box then in State combo box drop down list, there should be states of India.

How to do this in Sencha Architect? I am using three stores, one for first combo, second for USA States and third for INDIA States.

Can you help in this?

7 Aug 2014, 3:38 AM
A solution is to add a ‘clear’ trigger when the combobox has a value. The other solution is to add an empty row to the data store backing the combobox, usually as the first record.