Sencha中Ext.List组件无法识别，页面加载报错求助

核心错误原因 #

你遇到的Uncaught Error: [Ext.create] Unrecognized class name / alias: Ext.List，本质是两个问题：

1. Ext.List是Ext.dataview.List的别名，而非完整类名，如果依赖未正确加载，Sencha的类加载器无法解析这个别名。
2. 你可能混淆了Sencha不同工具包的组件，或者依赖声明不完整。

具体解决步骤 #

1. 修正组件创建代码 #

直接使用完整类名Ext.dataview.List创建组件，或者用xtype: 'list'的方式：

方式一：使用完整类名

var list = Ext.create('Ext.dataview.List', {
    fullscreen: true,
    itemTpl: '{title}',
    data: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' },
        { title: 'Item 4' }
    ]
});

方式二：使用xtype（推荐）

var list = Ext.create({
    xtype: 'list',
    fullscreen: true,
    itemTpl: '{title}',
    data: [
        { title: 'Item 1' },
        { title: 'Item 2' },
        { title: 'Item 3' },
        { title: 'Item 4' }
    ]
});

2. 确保依赖正确加载 #

根据你的项目结构，选择对应的依赖声明方式：

情况一：在MVC的View类中使用

在View的requires数组中明确添加Ext.dataview.List：

Ext.define('YourApp.view.YourTargetView', {
    extend: 'Ext.Container',
    requires: [
        'Ext.dataview.List'
    ],
    items: [{
        xtype: 'list',
        itemTpl: '{title}',
        data: [
            { title: 'Item 1' },
            { title: 'Item 2' },
            { title: 'Item 3' },
            { title: 'Item 4' }
        ]
    }]
});

情况二：直接在页面脚本中使用

在创建组件前，先通过Ext.require加载组件类：

Ext.require('Ext.dataview.List');

Ext.onReady(function() {
    var list = Ext.create('Ext.dataview.List', {
        fullscreen: true,
        itemTpl: '{title}',
        data: [
            { title: 'Item 1' },
            { title: 'Item 2' },
            { title: 'Item 3' },
            { title: 'Item 4' }
        ]
    });
});

情况三：使用Sencha Cmd构建项目

检查app.json的requires字段，确保包含dataview包：

"requires": [
    "dataview"
]

3. 检查工具包类型匹配 #

Sencha 6分为现代工具包（Modern）和经典工具包（Classic）：

• Ext.dataview.List是现代工具包的组件，如果你的项目使用经典工具包，需要改用Ext.grid.Panel（表格）或Ext.view.View（自定义列表）：

// 经典工具包下的替代实现
var grid = Ext.create('Ext.grid.Panel', {
    fullscreen: true,
    columns: [{
        text: 'Title',
        dataIndex: 'title',
        flex: 1
    }],
    store: Ext.create('Ext.data.Store', {
        data: [
            { title: 'Item 1' },
            { title: 'Item 2' },
            { title: 'Item 3' },
            { title: 'Item 4' }
        ]
    })
});

内容的提问来源于stack exchange，提问作者pmaravilla