4

このテクニックを使用して、コンボボックスのオートコンプリート機能を実現しています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: {
4

2 に答える 2

4

私はあなたがこのようなものを探していると思います(単純化された作業例)。

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これは一種の予約名であり、フィールド オブジェクト/プリミティブのタイプを識別するためです。

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

于 2012-12-16T07:56:21.450 に答える
0

リスト構成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'
}
于 2012-12-15T22:46:26.827 に答える