javascript – Extjs Combo diplay value – 如果找不到值

我正在使用这种技术来完成一个组合框http://cdn.sencha.com/ext-4.1.1a-gpl/examples/form/forum-search.html的自动完成功能,它返回一个汽车的名称和类型,有时类型是未知的,所以没有任何回报,我希望它是“无数据”所以我用这个valueNotFoundText：’没有数据’但没有用

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: { 

解决方法:

我想你正在寻找这种(简化的工作示例.)

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

那么这是如何工作的呢？

只需为下拉菜单设置模板(如果您的情况下根本需要),并设置显示字段的模板.

这两个例子都是简化的,因为我不知道你的整个模板.

更新的示例

注意：我不会使用type作为property-name,因为这是一个保留名称,因为它标识了field object / 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