为什么'；我的ExtJS组合框是否选择第一个条目？

我无法相信这是多么令人沮丧

我有一个组合框，我在几个地方定义和使用它。我使用的是

extjs5.0.1

它有一个简单的内存存储

我只想让它在创建时自动选择第一条记录

这是：

Ext.define('MYAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',

    autoSelect: true,
    editable: false,
    fieldLabel: 'Status',
    queryMode: 'local',
    store: [ ['ACTIVE', 'Active'], ['COMPLETE', 'Complete'], ['CANCELLED', 'Cancelled'] ],
    width: 160,

    initComponent: function () {
        this.labelWidth = 60;

        this.setRawValue('ACTIVE');   //  DOES NOT WORK
        this.callParent(arguments);
    }
});

这是行不通的。如果我在

initComponent

中稍微延迟一下，就我而言，这将是终止的理由。调用“setValue”也不起作用

Ext.define('MYAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',

    autoSelect: true,
    editable: false,
    fieldLabel: 'Status',
    queryMode: 'local',
    store: [ ['ACTIVE', 'Active'], ['COMPLETE', 'Complete'], ['CANCELLED', 'Cancelled'] ],
    width: 160,

    initComponent: function () {
        var self = this;
        this.labelWidth = 60;

        // THIS WORKS but is UGLY and STUPID
        setTimeout(function() {
            self.setRawValue('ACTIVE');
        }, 250);

        this.callParent(arguments);
    }
});

我错过了什么

---

谢谢，不要在initComponent上设置该值，请尝试在afterRender上设置该值

Ext.define('MYAPP.view.simplestatus.SimpleStatusCombo', {
        extend: 'Ext.form.field.ComboBox',
        xtype: 'simple-status-combo',

        autoSelect: true,
        editable: false,
        fieldLabel: 'Status',
        queryMode: 'local',
        store: [
            ['ACTIVE', 'Active'],
            ['COMPLETE', 'Complete'],
            ['CANCELLED', 'Cancelled']
        ],
        width: 160,

        initComponent: function() {
            this.labelWidth = 60;
            this.callParent(arguments);
        },
        afterRender: function(){
            this.setRawValue('ACTIVE');
        }
    });

在设置原始值之前调用this.callParent（）

initComponent: function () {
    this.labelWidth = 60;

    this.callParent(arguments);
    this.setRawValue('ACTIVE');
}

我终于解决了

我能够挂接到

boxready

事件中，它成功了

我相信其他方法不起作用，因为当外部容器被创建和激活时，组合在那个实例中还没有准备好。这就是为什么在它上面设置计时器起作用。它允许事情“稳定”下来

但是，

boxready

事件只被调用一次，因此我希望它不会影响此组合的其他用法。我们将拭目以待

无论如何，工作代码：

Ext.define('MyAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',

    autoSelect: true,
    displayField: 'value',
    editable: false,
    fieldLabel: 'Status',
    queryMode: 'local',
    store: [
        ['ACTIVE', 'Active'],
        ['COMPLETE', 'Complete'],
        ['CANCELLED', 'Cancelled']
    ],
    valueField: 'id',
    width: 160,

    initComponent: function () {
        var self = this;
        this.labelWidth = 60;

        self.on('boxready', function (me, width, height, eOpts) {
            me.setRawValue('ACTIVE');
        });

        this.callParent(arguments);
    }
});

---

我敢打赌这会管用，但不会。事实上，在我问这个问题之前，我甚至试过几乎完全这样做。无论如何+1，但仍然没有解决办法。呃。也试过了。仍然没有骰子。

Ext.define('MyAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',

    autoSelect: true,
    displayField: 'value',
    editable: false,
    fieldLabel: 'Status',
    queryMode: 'local',
    store: [
        ['ACTIVE', 'Active'],
        ['COMPLETE', 'Complete'],
        ['CANCELLED', 'Cancelled']
    ],
    valueField: 'id',
    width: 160,

    initComponent: function () {
        var self = this;
        this.labelWidth = 60;

        self.on('boxready', function (me, width, height, eOpts) {
            me.setRawValue('ACTIVE');
        });

        this.callParent(arguments);
    }
});