1

定型文を減らすためにカスタム 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正常にレンダリングされ、レコードのドロップダウンが正常に表示されますが、ドロップダウンからアイテムを選択すると、コンボボックスの表示フィールドが設定されません。ストアは選択されたレコードを (リスナーから見てselect) 見つけたようですが、値はまだ設定されていません...

ヘルプ？ありがとう。

編集:新しいストアがバインドされthis.callParent(arguments) た後に移動することで修正されました。これで修正される理由を説明する回答を受け入れています...（なぜ機能するのかわかりません..しかし、機能します）

4

1 に答える 1