PDA

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



Sophos
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

Arno.Nyhm
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.

Feltros
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).

Sophos
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();
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
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 :-)

ken_opp
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;' +
'</div></tpl>'

blay
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

ken_opp
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.

rg213847
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.

marin1000
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;
}