intraweb加载Extjs框架的路径问题

    intraweb的project有目录要求：

Templates目录中放置html文件，是intraweb的模板目录，wwwroot中放js、css、图片、flash等等资源文件。这是强制要求，放错位置加载就会失败。

    Sencha Architect建立的MVC模式的Extjs项目也有自己的目录要求：

index.html是首页，它加载app.js，app.js是整个Extjs框架的入口。自己编写的Extjs文件存放在app文件夹中。

为了整个工程既可以在delphiXE6中打开，有可以在 Sencha Architec中打开，而且又能运行调试加载前台Extjs框架，需要做必要的处理。

      以intraweb工程的目录要求为主。首先需要把Sencha Architec项目中的index.html转移到Templates文件夹中，但必须修改index.html中的加载路径，否则它找不到app.js和Extjs库的路径：

    <script src="../wwwroot/ext4/ext-all.js"></script>    // Extjs4库
    <script src="../wwwroot/ext4/ext-theme-neptune.js"></script>  // Extjs4库
    <link rel="stylesheet" href="../wwwroot/ext4/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">  // Extjs4库
    <script type="text/javascript" src="../wwwroot/ext4/locale/ext-lang-zh_CN.js"></script>  // Extjs4库
    <script type="text/javascript" src="../wwwroot/app.js"></script>  // js文件加载入口文件

将Sencha Architec项目的其它所有文件都放入wwwroot文件夹中：

                                                                 

这里需要注意的是wwwroot中不能有index.html，否则intraweb加载会报错。

    到这里如果使用intraweb的默认设置，已经可以正常加载Extjs了。但是这是在intraweb不开启AllowMultipleSessionsPerUser选项的情况，如果开启，整个intraweb的资源目录会发生变化：

开启AllowMultipleSessionsPerUser后intraweb自动在url中添加sessionID （GAppID），而Extjs动态加载的js文件被加载到了目录中，不在站点资源根目录下了。这样会出现错误：

 Failed to load resource: the server responded with a status of 404 (Not Found)

这个问题产生的根源是，当开启AllowMultipleSessionsPerUser后，页面加载IW内部js库和Extjs库文件时，资源目录还没变化，当通过app.js动态加载自己编写的js时，intraweb已经生成GAppID，目录变化。要解决这个问题，必须修正app.js加载js文件的路径。 分析app.js的代码：

Ext.Loader.setConfig({
    enabled: true   //开启动态加载
});

Ext.application({
    views: [
        'MyPanel'
    ],
    name: 'MyApp',
    launch: function() {
        Ext.create('MyApp.view.MyPanel', {renderTo: Ext.getBody()});//调用MyPanel.js
    }
});

必须改为

Ext.Loader.setConfig({
    enabled: true
});

Ext.Loader.setPath('MyApp', '../../app'); //向上两层，  跳转<span style="font-family: Arial, Helvetica, sans-serif;">127.0.0.1:6219/</span><span style="font-family: Arial, Helvetica, sans-serif;">GAppID/$/app/，回到 127.0.0.1:6219/app/。 MyApp是自编写类的命名空间</span>
Ext.require('MyApp.view.MyPanel');  // 这句必须有，与动态加载功能有关
Ext.application({
    views: [
        'MyPanel'
    ],
    name: 'MyApp',
    launch: function() {
        Ext.create('MyApp.view.MyPanel', {renderTo: Ext.getBody()});
    }
});

处理后加载路径变成了：

app/view回到了127.0.0.1/6219/下，Extjs也能正常加载。关键是开启AllowMultipleSessionsPerUser后，每个页面有独立的session，并且用户关闭浏览器的cookie也不影响程序的运行了。

    每次用Sencha Architec修改过前台文件后，把修改好的app.js覆盖过去，并删掉自动生成的index.html就可以用intraweb加载调试了。

///

另外修改后的app.js也可写成下面形式：

</pre><pre name="code" class="javascript">(function() {
    var cfg = Ext.Loader.getConfig();
    cfg.enabled = true;
    Ext.Loader.setConfig(cfg);
    Ext.Loader.setPath('MyApp', '../../app');

    Ext.require('MyApp.view.MyPanel');

    Ext.onReady(function() {
        Ext.create('MyApp.view.MyPanel').show();
    });
})();