ExtJS: Пользовательский ComboBox

Question

Я просто пытаюсь создать пользовательский элемент управления ComboBox, чтобы уменьшить некоторые шаблонные:

Ext.define('App.AutoComboBox', { 
    extend: 'Ext.form.field.ComboBox', 
    alias: 'widget.autocombobox', 

    states: null, 

    initComponent: function() { 
     this.callParent(arguments); 
     if (!this.states) { 
      this.queryMode = 'remote'; 
     } else { 
      this.queryMode = 'local'; 
      this.bindStore(Ext.create('Ext.data.Store', { 
       type: 'array', 
       fields: ['_placeholder_'], 
       data: _.map(this.states, function(state) { 
        return {_placeholder_ : state}; }) 
      })); 
      this.displayField = this.valueField = '_placeholder_' 
     } 
     this.validator = function(v) { 
      var field = this.displayField, 
       index = this.getStore().findExact(field, v); 
      return (index!==-1) ? true : 'Invalid selection'; 
     }; 
    }, 
    listeners: { 
     select: function(combo, records) { 
      console.log(combo.getStore().indexOf(records[0])); // !== -1 
     } 
    } 
}); 

Так что я могу использовать его как:

requires: ['App.AutoComboBox'], 
... 
items: [{ 
    xtype: 'autocombobox', 
    name: 'test_local', 
    fieldLabel: 'test_local', 
    states: [ 'cat', 'dog' ] // local 
}, { 
    xtype: 'autocombobox', 
    name: 'test_remote', 
    fieldLabel: 'test_remote', 
    store: 'Chipmunks', // a remote store 
    displayField: 'chipmunk_name' 
}] 
... 

Но что-то неладно. AutoComboBox отображает ОК, показывает раскрывающийся список записей в порядке, но когда я выберите элемент из выпадающего списка, поле отображения combobox не установлено. Кажется, что магазин нашел выбранную запись (как видно на слушателе select), но значение все еще не установлено ...

Помощь? Благодарю.

Edit: FIXED путем перемещения this.callParent(arguments)после новый магазин привязывается. Теперь принимать ответы, которые объясняют, почему это фиксирует это ... (я не знаю, почему это работает .. но он делает)

Answer 1

В методе родительского initComponent, то displayField используется для создания displayTpl:

if (!me.displayTpl) { 
     me.displayTpl = new Ext.XTemplate(
      '<tpl for=".">' + 
       '{[typeof values === "string" ? values : values["' + me.displayField + '"]]}' + 
       '<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' + 
      '</tpl>' 
     ); 
    } else if (Ext.isString(me.displayTpl)) { 
     me.displayTpl = new Ext.XTemplate(me.displayTpl); 
    } 

bindStore вызов не имеет, вероятно, ничего общего с этим, я считаю, что это эта линия, которая должна поставить перед вызовом родительского метода:

this.displayField = this.valueField = '_placeholder_';