Extjs组合显示值 - 如果找不到值 [英] Extjs Combo diplay value - if value is not found

问题描述

我正在使用这种技术来完成组合框 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& / FO NT>< / p为H.; 
} 
，
} 
，listeners：{
  

解决方案

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

  Ext.create（'Ext.form.ComboBox'，{
 fieldLabel：'Choose State'，
 store：states，
 typeAhead：true，//这将只显示打字文本如果没有找到
 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'，//您可以返回任何其他addi 
'< tpl else>'，
'{name}'，//您可以返回任何其他附加值或在这里形成
'< / tpl>' ，
'< / tpl>'
），
 valueNotFoundText：'no data'//如果在setValue（）
}之后没有找到记录，将显示这个; 
  

这是一个工作的 JSFiddle

那么这个工作如何工作 >

只需设置下拉菜单的模板（如果您需要的话），并设置显示字段的模板。

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

更新的例子 / p>

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

  var states = Ext.create（'Ext.data .Store'，{
 fields：['abbr'，'name'，'ctype']，
 data：[
 {abbr：AL，name阿拉巴马州，ctype：AL}，
 {abbr：AK，name：阿拉斯加，ctype：AK}，
 {abbr ：AZ，name：Arizona，ctype： } 
] 
}）; 
 
 //创建组合框，附加到状态数据存储
 Ext.create（'Ext.form.ComboBox'，{
 fieldLabel：'Choose State'，$ 
 store：state，
 typeAhead：true，//这将只显示打字文本，如果没有找到
 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>没有数据< / 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'，//如果在setValue（）后没有找到记录，则会显示这个。
 renderTo：Ext.getBody（）
}）; 
  

JSFiddle

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

Here's a working 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 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组合显示值 - 如果找不到值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！