Geek Answers Handbook

Extjs Combo diplay value - if the value is not found

I use this technique to perform the autocomplete function for the http://cdn.sencha.com/ext-4.1.1a-gpl/examples/form/forum-search.html combo box, it returns the name and type of car, sometimes the type is unknown. so nothing comes back, I would like it to be 'No data', so I used this valueNotFoundText: 'No Data' , but it didn't work

 xtype: 'combo', store: s, hideTrigger:true, typeAhead: false, id: 'search', queryMode: 'remote', queryParam: 'query', displayField: 'name',//+'type', valueField: 'name',//+'type', //valueNotFoundText: 'No Data', ,listConfig: { loadingText: ' Loading...', getInnerTpl: function() { return '{name}'+'<br>'+'<p><font size="1">{type}'+':type</font></p>'; } , } , listeners: {
+4
source share
2 answers

I think you're looking for a kind (simplified working example.)

 Ext.create('Ext.form.ComboBox', { fieldLabel: 'Choose State', store: states, typeAhead: true, // this will simply show the typed text if nothing is found. queryMode: 'local', displayField: 'name', valueField: 'abbr', tpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '<div class="x-boundlist-item">{abbr}</div>', '</tpl>' ), displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '<tpl if="name.length == 0"> ', 'no data', // You can return any other additional value or formating here '<tpl else>', '{name}', // You can return any other additional value or formating here '</tpl>', '</tpl>' ), valueNotFoundText: 'no data' // this will be displayed if no record is found after setValue() });

JSFiddle works here

So how does it work

Just set the template for the drop-down menu (if necessary at all in your case) and set the template for the display field.

Both examples are simplified because I don’t know your whole template.

Updated examples

Note. I would not use type as a property name, because it is a kind of reserved name, because it identifies the type of field / primitive

 var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name','ctype'], data : [ {"abbr":"AL", "name":"Alabama", "ctype":"AL"}, {"abbr":"AK", "name":"Alaska", "ctype":"AK"}, {"abbr":"AZ", "name":"Arizona", "ctype":""} ] }); // Create the combo box, attached to the states data store Ext.create('Ext.form.ComboBox', { fieldLabel: 'Choose State', store: states, typeAhead: true, // this will simply show the typed text if nothing is found. queryMode: 'local', displayField: 'name', valueField: 'abbr', tpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '<tpl if="ctype.length == 0"> ', '<div class="x-boundlist-item">{name}<p><font size="1">no data</font></p></div>', '<tpl else>', '<div class="x-boundlist-item">{name}{ctype}<p><font size="1">{ctype}</font></p></div>', '</tpl>', '</tpl>' ), displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '<tpl if="itype.length == 0"> ', 'no data', '<tpl else>', '{name}', '</tpl>', '</tpl>' ), valueNotFoundText: 'no data', // this will be displayed if no record is found after setValue() renderTo: Ext.getBody() });

Jsfiddle

+4
source

You can use the emptyText config option in the config list http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.AbstractView-cfg-emptyText . The inner class of the ComboBoxes BoundList list extends from View, so it follows the same api. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-listConfig

 listConfig: { emptyText: 'No Data' }
0
source

More articles:


All Articles