extjs 部署 - 文件加载顺序答案

【问题标题】：extjs deployment - order of file loadingextjs 部署 - 文件加载顺序
【发布时间】：2023-03-26 06:14:01
【问题描述】：

我已经到了可以部署 extjs 网络应用程序的阶段，并使用 sencha CMD 创建了 jsb 文件，并使用该文件创建了 all-classes.js 和 all-app.js。但是当我尝试运行已部署的版本时它失败了 - 我明白为什么，但我不知道如何修复它。你看，我的应用的 app.js 文件是这样的；

var SessionData = null;
var Proxy = null;    

Ext.Ajax.on('requestexception', function (conn, response) {
    if (response.status === 401) {
        window.location.href = "../login/index.html";
    }
    if (response.status === 403) {
        var data = Ext.decode(response.responseText);
        Ext.MessageBox.alert('Error', data.error);
    }
});
....
Ext.Ajax.request({
    url :'/LPAA/Servlets/servlet/LPA',
    method: 'GET',
    params: {
        action: App.Actions.UserManagement.VALIDATE,
        lpCode: getJsonFromUrl().lpParentCode
    },
    scope: this,
    success: onValidateSession,
    failure: function(){
        window.location.href = "../login/index.html";
    }
});
....
function onValidateSession(response){
    SessionData = Ext.decode(response.responseText);
    if (SessionData == null || SessionData.userName == null){
        window.location.href = "../login/index.html";
        return;
    }
    Proxy = {
        type: 'ajax',
        url :'/LPAA/Servlets/servlet/LPA',
        timeout:120000,
        reader: {
            root: "array",
            type: 'json'
        },
        writer: {
            type: 'json'
        }
    };
    Ext.Loader.setConfig({
        enabled: true,
        disableCaching: false // this prevents break-points in Chrome's debugger to     disappear after reloading the page
    });

    Ext.application({
        requires: [...],
        models: [...],
        stores: [...],
        views: [...],
        controllers: [...],
        name: 'LPAClient',
        launch: function () {
            globalApp = this;
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: [
                    {
                        xtype: 'entitlement'
                   }
               ]
            });
            try {
                Ext.create('LPAClient.GeneralUtils');
            } catch (ex){}
        }
    });
}

关键是首先通过服务器验证会话，并且只有当它有效时才会构造应用程序。现在当我运行应用程序时，我在浏览器控制台中遇到的错误是

Uncaught TypeError: Cannot call method 'on' of undefined

哪个来源在代码开头的Ext.Ajax.on('requestexception'...。我可以在网络选项卡中看到 app-all.js 在 Ajax.js 文件之前加载。如何强制我的应用程序在加载 all-app.js 文件之前加载 Ajax.js 文件？或者换句话说 - 我怎样才能让 app.js 在使用它之前需要“Ext.Ajax”？

干杯，埃雷兹

【问题讨论】：

您是否尝试使用sencha app build 而不是jsb 方式？ jsb 被推荐用于 ExtJS 3，但不推荐用于 ExtJs 4。
我使用了这里解释的“sencha build”命令 - [link]existdissolve.com/2011/08/extjs-4-my-first-build/[link] 你的意思是别的吗？如果是，那是什么？
@LorenzMeyer 是对的。如果您已经使用它生成了项目，那么使用 Sencha CMD 部署 extjs4 项目非常容易。您所要做的就是执行命令sencha app build 然后sencha app build production，您就可以部署您的项目了。

标签： ajax extjs extjs4 web-deployment

【解决方案1】：

您的代码的第一个问题是您不应该在应用程序之外运行 ExtJS 代码。将您的会话验证码放入应用程序的launch 方法中。这更符合 ExtJs 中新的 MVC 范式。

关于煎茶cmd： Sencha cmd 版本 4 知道您的应用程序使用的所有 javascript 文件，您不再需要维护 jsb 文件。阅读introduction to Sencha Cmd here 和complete Sencha Command 4.0 docs。

jsb3 编译应用程序的方法与 Sencha Command 3.0 一起使用，并且出于向后兼容性的原因在 4.0 版中工作，但不鼓励这样做。您提到的参考文献已经超过两年了，现在已经过时了，因为它是在 Sencha cmd 4.0 发布之前编写的。

我无法解释如何将项目迁移到 ExtJs 的新思维方式。所涉及的步骤肯定是：

确保每个 JS 文件只包含一个类定义，并且它位于与其包含的类名对应的路径中。
根据recommendations查看您的文件夹结构：

应用程序/ 模型/ 店铺/ 控制器/ 看法/ 应用程序.js 索引.html app.js

【讨论】：