Extjs Combo diplay值 - 如果未找到值

Question

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

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

Answer 1

我想你正在寻找这种（简化的工作示例。）

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

Answer 2

您可以在列表配置http://docs.sencha.com/ext-js/4-1/#!/api/Ext.view.AbstractView-cfg-emptyText中使用emptyText配置选项。 ComboBoxes内部列表类BoundList从View扩展，因此它遵循相同的api。 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-cfg-listConfig

listConfig: {
    emptyText: 'No Data'
}