Ext JS 应用程序中的部署：更改商店中的 URL答案

【问题标题】：Deployment in Ext JS applications: Changing URLs in StoresExt JS 应用程序中的部署：更改商店中的 URL
【发布时间】：2012-04-23 06:52:14
【问题描述】：

我正在为我正在构建的应用程序（使用 Ext JS + 另一个应用程序的后端）制定构建过程，并尝试查看它是否存在更改本地 URL 的“最佳实践”方式（例如 data/my -data.json) 到我的开发服务器的后端，然后到我的生产服务器的后端。

在我的商店中，我目前有以下代码：

Ext.define('APP.store.DataRecords', {
    extend: 'Ext.data.Store',
    model: 'APP.model.DataRecord',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'data/data-records.json',
            update: 'data/update-data-records.json'
        },
        reader: {
            type: 'json',
            root: 'records',
            successProperty: 'success'
        }
    }
});

运行 sencha build 命令后，理想情况下，我希望将 Store 转换为如下内容：

Ext.define('APP.store.DataRecords', {
    extend: 'Ext.data.Store',
    model: 'APP.model.DataRecord',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'http://mydevserver/.../data-records.json',
            update: 'http://mydevserver/.../update-data-records.json'
        },
        reader: {
            type: 'json',
            root: 'records',
            successProperty: 'success'
        }
    }
});

我想如果没有任何“直接”方法，我需要构建一个额外的脚本，它首先重新映射我所有的 URL，然后调用 sencha 编译器。

P.S.我知道这一切通常都是通过使用“相对”网址透明地发生的，但我与之交互的后端有一些限制，这会阻止这种情况发生。

想法？

提前致谢！

【问题讨论】：

标签： javascript deployment extjs

【解决方案1】：

我建议不要在连接到您的商店时使用完整的 URL。如果您正在使用 Ajax 调用并尝试转到不同的域名，则此类调用将被视为跨站点调用，浏览器将阻止它们。

【讨论】：

使用完整的 URL 肯定会导致问题，但在这种情况下，我应该能够很快地将它从 AJAX 切换到 JSONP。然而，目前，我采用了仅使用相对 URL 的方法，这可能会导致以后出现问题。仍然有兴趣了解是否有人有他们可能使用过的替代方法。

【解决方案2】：

在你的 app.json 中

    /**
     * override objects for setting build environment specific
     * settings.
     */
    "production": {
      "api_url": "http://example.com"
    },

    "testing": {
      "api_url": "http://localhost:3000"
    },

    "development": {
      "api_url": "http://localhost:3000"
    },

在您商店的代理配置中

    proxy: {
      type: 'rest',
      url: Ext.manifest.api_url + '/products',
      format: 'json',
      withCredentials: true,
      useDefaultXhrHeader: false,
      reader: {
        type: 'json',
        rootProperty: '',
        totalProperty: ''
      },
      writer: {
        type: 'json'
      }
    }

【讨论】：