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呈现OK，显示记录下拉列表，但是当我从下拉列表中选择项时，组合框的显示字段未设置。商店似乎找到了所选的记录（由select监听器看到），但该值仍未设置...

帮助？感谢。

编辑：在新商店绑定后移动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_';

ExtJS：自定义组合框

1 个答案: