Extjs Combo diplay 值 - 如果未找到值 [英] Extjs Combo diplay value - if value is not found

问题描述

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

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

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

推荐答案

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

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()
});

这是一个有效的 JSFiddle

Here's a working JSFiddle

这是如何工作的

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

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.

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

更新示例

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

Note: I would not use type as property-name cause this is sort of a reserved name, cause it identifies the type of the 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

这篇关于Extjs Combo diplay 值 - 如果未找到值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！