1. #1
    Sencha User
    Join Date
    Aug 2009
    Posts
    6
    Vote Rating
    0
    Sophos is on a distinguished road

      0  

    Default How to add an empty value to ComboBox

    How to add an empty value to ComboBox


    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

  2. #2
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    0
    Arno.Nyhm is on a distinguished road

      0  

    Default


    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.
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    44
    Vote Rating
    0
    Feltros is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Aug 2009
    Posts
    6
    Vote Rating
    0
    Sophos is on a distinguished road

      0  

    Default


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

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

  5. #5
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    0
    Arno.Nyhm is on a distinguished road

      0  

    Default


    thanks for sharing your solution :-)

    i see you solved the problem of small empty lines with the </br> tag :-)
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    8
    Vote Rating
    0
    ken_opp is on a distinguished road

      0  

    Default


    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>'

  7. #7
    Sencha User
    Join Date
    Oct 2010
    Posts
    129
    Vote Rating
    0
    blay is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User
    Join Date
    Mar 2011
    Posts
    8
    Vote Rating
    0
    ken_opp is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha User
    Join Date
    Feb 2013
    Posts
    1
    Vote Rating
    0
    rg213847 is on a distinguished road

      0  

    Default empty value addition to combobox.

    empty value addition to combobox.


    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.

  10. #10
    Sencha User
    Join Date
    Jul 2008
    Posts
    1
    Vote Rating
    0
    marin1000 is on a distinguished road

      0  

    Default


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