5

I have an Ext ComboBox where the user should be able to choose no value. ExtJS doen't support that out of the box.

What I've tried:

use a second trigger that clears the value

Works but is not very usable. I want a better solution.

add "fake" null item to store:

While this does kind of work I would have to modify the model for that to allow null value for id. And this looks more like a hack.

set custom tpl like

'<ul class="x-list-plain">',
  '<li role="option" unselectable="on" class="x-boundlist">(no selection)</li>',
  '<tpl for=".">',
    '<li role="option" unselectable="on" class="x-boundlist-item">{name}</li>',
  '</tpl>',
'</ul>'

But now it's getting really difficult, now idea how to get that working properly.

jsfiddle:

http://jsfiddle.net/q5e3J/1/

with custom tpl: http://jsfiddle.net/q5e3J/2/

Niko Sams
  • 4,304
  • 3
  • 25
  • 44

2 Answers2

5

Please refer this link How to add an empty item to ExtJS combobox?

Update: jsfiddle with that solution implemented: http://jsfiddle.net/q5e3J/3/

var combo = Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    displayField: 'name',
    valueField: 'abbr',
    value: 'AL',
    store: Ext.create('Ext.data.Store', {
        model: 'State',
        data: states
    }),
    queryMode: 'local',
    editable: false,
    emptyText: 'No Selection',
    listConfig: {
        tpl: '<div class="my-boundlist-item-menu">No Selection</div>'
            + '<tpl for=".">'
            + '<div class="x-boundlist-item">{name}</div></tpl>',
        listeners: {
            el: {
                delegate: '.my-boundlist-item-menu',
                click: function() {
                    combo.clearValue();
                }
            }
        }
    }
});
Community
  • 1
  • 1
Renganathan M G
  • 5,039
  • 2
  • 31
  • 35
  • Thank you for your answer - but I don't get this. Could you please update the jsfiddle with your code integraded? – Niko Sams Apr 14 '14 at 09:42
  • This is a really great solution. It does have a downside though: the emptyValue is not selectable via keyboard navigation. Overall, not a big deal in most scenarios. Thanks for this! – Mike Post Aug 28 '14 at 17:02
  • Also if you're creating everything via configs, you can't use combo.clearValue() (because combo is not defined). Instead you can take the second argument of the click event handler (el) and do: Ext.getCmp(el.parentNode.parentNode.id).findParentByType('combobox'). There's probably an easier way, but I wanted something that would stand a chance of surviving across version upgrades. I couldn't find a way around using the double parentNode reference though. – Mike Post Aug 28 '14 at 17:05
  • 1
    Modified your code to make it more interactive and converted the json data to a 2d-array for readability. -> http://jsfiddle.net/MrPolywhirl/1t3z8b2L/ – Mr. Polywhirl Mar 09 '15 at 18:38
0

You could use the "change" listener on the combo config and check for null values:

change: function() {
  if (this.getValue() === null) {
    // Set default Value here
  }
};
Federico Orquera
  • 108
  • 8
  • I have 2 problems with that: it doesn't work with 'editable: false' and it won't visually display the user how to select the 'all' value. – jansepke Apr 13 '14 at 00:24
  • Can you add the definition of your combo/store/model to the question? I might be able to give you a better answer. – Federico Orquera Apr 13 '14 at 02:00
  • http://jsfiddle.net/q5e3J/1/ I want to select no state (which could mean "none" or "all" depending on context) – Niko Sams Apr 13 '14 at 15:38
  • With the editable property set to false, I don't see any other way to do it. You have to edit the model and add a value representing the "null". – Federico Orquera Apr 13 '14 at 20:00
  • is there no possibility to create a template that adds this line? – jansepke Apr 14 '14 at 08:04