Sencha Ext JS：如何在同一文件中设置多个define？

嘿，我来帮你搞定这个问题！其实在Sencha Ext JS的同一个文件里声明多个Ext.define是完全可行的，你的代码写法本身语法上没问题，大概率是一些细节或者加载顺序的小问题导致出错。下面给你梳理正确的做法和注意事项：

基础写法的合法性 #

你的两个类定义的写法是完全合规的，Ext JS允许在单个文件中依次编写多个Ext.define语句，不需要额外的包裹结构。

关键注意事项 #

• 明确依赖关系：如果你的ExtDoc.views.extfields.ExtDocField这个mixin是在其他文件中定义的，一定要确保它在这两个类加载前被加载完成。最稳妥的方式是给每个类的定义加上requires配置，让Ext JS的加载器自动处理依赖顺序；
• 命名与方法一致性：要保证类的命名空间（比如ExtDoc.views.extfields）在你的项目中是正确配置的，没有拼写错误；同时要确认updateAfterRender方法在mixin中已经正确定义，否则会触发未定义函数的错误。

修正后的示例代码 #

// 定义ExtDocPanel类
Ext.define('ExtDoc.views.extfields.ExtDocPanel', {
    extend: 'Ext.panel.Panel',
    mixins: ['ExtDoc.views.extfields.ExtDocField'],
    requires: ['ExtDoc.views.extfields.ExtDocField'], // 声明依赖的mixin
    listeners: {
        afterrender: function(){
            this.updateAfterRender();
        }
    }
}); 

// 定义ExtDocTextField类
Ext.define('ExtDoc.views.extfields.ExtDocTextField', {
    extend: 'Ext.form.TextField',
    mixins: ['ExtDoc.views.extfields.ExtDocField'],
    requires: ['ExtDoc.views.extfields.ExtDocField'], // 声明依赖的mixin
    listeners: {
        afterrender: function(){
            this.updateAfterRender();
        }
    }
});

排查问题的小技巧 #

如果还是遇到报错，打开浏览器开发者工具的控制台，查看具体的错误信息：

• 如果是“mixin not found”类的错误，检查requires配置的路径是否正确，或者mixin文件是否被正确加入到项目的加载列表中；
• 如果是“updateAfterRender is not a function”，确认这个方法在ExtDocField mixin中已经正确实现；
• 检查文件名与类名的映射：虽然你在ExtDocPanel文件中写了两个类，只要在项目的app.json或者加载配置中，这个文件能被正确关联到这两个类，就不会有加载问题。

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