javascript Extjs Combo diplay 值 - 如果未找到值

Extjs Combo diplay value - if value is not found

提问by Noon

I am using this technique to accomplish an auto-complete feature for a combo box http://cdn.sencha.com/ext-4.1.1a-gpl/examples/form/forum-search.html, it returns name and type of a car, sometimes the type is unknown so nothing returns, I would like it to be "No Data" so I used this valueNotFoundText: 'No Data'but didn't work

我正在使用这种技术来完成组合框的自动完成功能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: { 

采纳答案by sra

I guess you are looking for sort of this (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()
});

Here's a working JSFiddle

这是一个有效的JSFiddle

So how does this work

那么这是如何工作的

Simply set the Template for the dropdown menu (if this is needed at all in your case) and set the template for the display field.

只需为下拉菜单设置模板（如果您的情况需要这样做）并为显示字段设置模板。

Both examples are simplified cause I do not know your entire template.

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

Updated examples

更新示例

Note: I would not use typeas property-name cause this is sort of a reserved name, cause it identifies the type of the field object/primitive

注意：我不会将其type用作属性名称，因为这是一种保留名称，因为它标识了字段对象/原语的类型

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

JSFiddle

回答by pllee

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

您可以在列表配置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'
}