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渲染OK，显示下拉记录很好，但是当我从下拉列表中选择一个项目时，组合框的显示字段没有设置。商店似乎找到了选定的记录（如select侦听器所见），但该值仍未设置...

帮助？谢谢。

编辑：在绑定新商店this.callParent(arguments) 后移动已修复。现在接受解释为什么会修复它的答案......（我不知道它为什么会起作用......但确实如此）

4

1 回答 1

2

在父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_';
于 2013-11-07T09:32:56.950 回答