Question

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

我有一个我在几个地方定义和使用的组合框。我正在使用ExtJS 5.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);
    }
});

我在这里缺少什么？

由于

Answer 1

Ext.define('MYAPP.view.simplestatus.SimpleStatusCombo', {
    extend: 'Ext.form.field.ComboBox',
    xtype: 'simple-status-combo',
    autoSelect: true,
    editable: false,
    fieldLabel: 'Status',
    displayField: 'value',
    valueField: 'id',
    store: Ext.create(
            'Ext.data.Store', {
                fields: ['id', 'value'],
                data: [
                    {"id": "ACTIVE", "value": "Active"},
                    {"id": "COMPLETE", "value": "Complete"},
                    {"id": "CANCELLED", "value": "Cancelled"}
                ]
            }
    ),
    width: 160,
    value: 'ACTIVE'
});

Answer 2

不是在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');
        }
    });

Answer 3

在设置原始值之前调用this.callParent()。

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

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

Answer 4

我终于解决了它。

我能够加入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);
    }
});

为什么我的ExtJS组合框没有选择第一个条目？

4 个答案: