添加Ext.onReady()后ExtJS ComboBox示例无法正常工作求助

DevOps 小满

2026-8-9

Ext.form.ComboBox在Sencha Fiddle无法运行的问题排查

你从ExtJS 6.6.0官方文档获取的ComboBox示例，添加Ext.onReady()后在Sencha Fiddle中无法正常运行，你的代码如下：

Ext.onReady(function () {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
    {"abbr":"AL", "name":"Alabama"},
    {"abbr":"AK", "name":"Alaska"},
    {"abbr":"AZ", "name":"Arizona"}
]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
});

问题原因

核心错误是类名使用错误：在ExtJS 6.x Classic工具包中，下拉框的正确类名是Ext.form.field.ComboBox，而你代码里写的Ext.form.ComboBox并不存在，直接导致组件无法创建。

修正后的代码

Ext.onReady(function () {
    // 状态数据仓库
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
        ]
    });

    // 创建绑定状态仓库的下拉框
    Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Choose State',
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        renderTo: Ext.getBody()
    });
});