ExtJS6'da görüntülenenden farklı bir değer seçmek için combobox nasıl kullanılır?

Question

3 alanlı bir depoya bağlı temel bir combobox'ım var: id, name ve description. Böyle davranmaya combobox yapmaya çalışıyorum:

• description mı gösterilecek combobox genişletildiğinde
• description mı aranabilir olmasını bir kullanıcı herhangi bir öğeyi seçtiğinde
• name görüntülenecek mü yazarken

şu yapılandırma neredeyse everyth çözer listeden

ComboBox'ın iç değer olması id var description hariç ing aranabilir olma: Bu nasıl hakkında

{ 
    xtype: 'combo', 
    queryMode: 'local', 
    triggerAction: 'all', 
    forceSelection: false, 
    editable: true, 
    anyMatch: true, 
    valueField: 'id', 
    displayField: 'name', 
    listConfig: { 
     itemTpl: '{description}' 
    }, 
    store: store, 
}, 

Answer 1

Seçenek 1:

Sen Combobox geçersiz kılabilir - doLocalQuery yöntemi ve searchField gibi bir daha özellik desteği eklemek. ben bu yöntemde yaptığımız tek değişiklik searchField sonra arama alanını kullanacak yapılandırılırsa, aksi takdirde normal displayField için yedeklerini

property: me.searchField || me.displayField,

ile property: me.displayField, değiştirilir.

Ext.define('App.override.form.field.ComboBox', { 
    override: 'Ext.form.field.ComboBox', 


    doLocalQuery: function(queryPlan) { 
     var me = this, 
      queryString = queryPlan.query, 
      store = me.getStore(), 
      filter = me.queryFilter; 

     me.queryFilter = null; 

     // Must set changingFilters flag for this.checkValueOnChange. 
     // the suppressEvents flag does not affect the filterchange event 
     me.changingFilters = true; 
     if (filter) { 
      store.removeFilter(filter, true); 
     } 

     // Querying by a string... 
     if (queryString) { 
      filter = me.queryFilter = new Ext.util.Filter({ 
       id: me.id + '-filter', 
       anyMatch: me.anyMatch, 
       caseSensitive: me.caseSensitive, 
       root: 'data', 
       // use searchField if available or fallback to displayField 
       property: me.searchField || me.displayField, 
       value: me.enableRegEx ? new RegExp(queryString) : queryString 
      }); 
      store.addFilter(filter, true); 
     } 
     me.changingFilters = false; 

     // Expand after adjusting the filter if there are records or if emptyText is configured. 
     if (me.store.getCount() || me.getPicker().emptyText) { 
      // The filter changing was done with events suppressed, so 
      // refresh the picker DOM while hidden and it will layout on show. 
      me.getPicker().refresh(); 
      me.expand(); 
     } else { 
      me.collapse(); 
     } 

     me.afterQuery(queryPlan); 
    } 
}); 

Ve bu açılan yapılandırma olacak

{ 
    xtype: 'combo', 
    queryMode: 'local', 
    triggerAction: 'all', 
    forceSelection: false, 
    editable: true, 
    anyMatch: true, 
    valueField: 'id', 
    displayField: 'name', 
    searchField: 'description', 
    listConfig: { 
     itemTpl: '{description}' 
    }, 
    store: store, 
}, 

https://fiddle.sencha.com/#fiddle/17lc

Seçenek 2:

Yapılandırma displayField açıklama olarak ve sadece displayTpl "ad" kullanmak yapılandırmak özelliği. Daha fazlası da listConfig'i kaldırabilirsiniz.

{ 
    xtype: 'combo', 
    queryMode: 'local', 
    triggerAction: 'all', 
    forceSelection: false, 
    editable: true, 
    anyMatch: true, 
    valueField: 'id', 
    displayField: 'description', 
    displayTpl: new Ext.XTemplate(
     '<tpl for=".">' + 
     '{[typeof values === "string" ? values : values["name"]]}' + 
     '</tpl>' 
    ), 
    store: store, 
} 

https://fiddle.sencha.com/#fiddle/17ld

Answer 2

?

{ 
    xtype: 'combo', 
    queryMode: 'local', 
    triggerAction: 'all', 
    forceSelection: false, 
    editable: true, 
    anyMatch: true, 
    valueField: 'id', 
    displayField: 'name', 
    listConfig: { 
     itemTpl: '{description}' 
    }, 
    store: store, 
    listeners: { 
     change: function() { 
      var store = this.store; 
      store.clearFilter(); 
      store.filter({ 
       property: 'description', 
       anyMatch: true, 
       value : this.getRawValue() 
      }); 

      this.expand(); 
     } 
    } 
}, 

https://fiddle.sencha.com/#fiddle/17ks

Güncelleme: Yazarken Yukarıdaki kod iyi görünüyor.
Ancak bazı verileri seçtikten sonra, filtrelenmiş nedeniyle genişleyemez ...

Ayrıca aşağıdaki kodları da denedim. 2. örnek. Turp en

listeners: { 
    keyup: function() { 
     var store = this.store; 
     store.clearFilter(); 
     store.filter({ 
      property: 'description', 
      anyMatch: true, 
      value : this.getRawValue() 
     }); 

     this.expand(); 
    }, 
    collapse: function() { 
     var store = this.store; 
     // Reset filter here. 
     store.clearFilter(); 
    } 
}, 

2 Örnek Çalışma:

https://fiddle.sencha.com/#fiddle/17ku Ben 2 kod, 1'inden daha iyi olduğunu hissediyorum. Ama aynı zamanda mükemmel bir şekilde çalışmıyor ...