将字符串与Javascript中的变量连接在Sencha Touch框架上无法正常工作

Question

在我的Sencha Touch 2应用程序中，我有一个数据视图，其中填充了JSONP代理中的元素。 我的代理代码如下：

proxy:
{
type: 'jsonp',
url: MyApp.util.Config.getBaseUrl() +
         '/getStatus.php?sid=' + MyApp.util.Config.getSid(),
    reader:
    {
    type: 'json',
    rootProperty: 'element'
    }
  }
}

我在Config.js文件中声明了一些全局变量。 当我使用硬编码的sid调用MyApp.util.Config.getBaseUrl() + /getStatus.php?sid=123时，事情按预期进行。 但是，如果我尝试获取全局变量sid并将其附加到/getStatus.php?sid= ，则它将返回，好像sid为空白。 我在我的app.js文件中填充了全局变量，并在设置它以确保其已填充并确定它似乎正在运行之后将其打印到控制台。

如何使用有效的sid调用url？ 我添加的方式有问题吗？

编辑-尝试回答后的完整代码：

Ext.define('MyApp.view.DashboardView',
{
    extend: 'Ext.dataview.DataView',
    xtype: 'dashboardview',
    requires: 'MyApp.util.Config',
    config:
    {
        xtype: 'dataview',
        itemId: "dvitem",
        styleHtmlContent: true,
        itemTpl: [ /* some stuff goes here */ ],
        emptyText: 'More Stuff here',
        listeners:
        {
            element: 'element',
            delegate: '#statusbtn',
            tap: function (item, idx, el, evt)
            {
                // gets the item you tapped
                btnId = el.getAttribute('uniqueId');
                alert("hello " + btnId);
            }
        },

        store:
        {
            autoLoad: true,

            fields: [
                {
                    name: 'sid',
                    type: 'int'
                },
                {
                    name: 'user',
                    type: 'int'
                },
                {
                    name: 'from',
                    type: 'string'
                },
                {
                    name: 'to',
                    type: 'string'
                }

            ],

            proxy:
            {
                type: 'jsonp',
                //url: MyApp.util.Config.getBaseUrl() + '/gettatus.php?sid='+MyApp.util.Config.getSid(),
                reader:
                {
                    type: 'json',
                    rootProperty: 'element'
                }
            }
        }

    }

},
function ()
{
    //I think I need to setSid here before. In the meantime, this doesn't work.

    this.prototype.proxy.url = MyApp.util.Config.getBaseUrl() +
        '/getStatus.php?sid=' + MyApp.util.Config.getSid();
}
);

Answer 1

调用MyApp.util.Config.getSid()的代码可能在任何应用程序的初始化代码之前执行。 在控制台中测试它时，特别是对配置的初始化已执行。

想想会发生什么。 首先，每个javascript文件都会从上到下加载并执行一次。 完成此操作后，将调用在Ext.onReady注册的任何函数，并初始化和创建您的应用程序实例。 但是，您对MyApp.util.Config.getSid()调用不在函数的主体中 ，因此，在Ext真正初始化之前，一旦包含文件被加载，就会立即调用它。

一种解决方案是在使用此代理的类的后创建函数中设置此url。 但是您仍然需要确保在此之前已执行配置初始化代码。

您可以通过将配置放到几乎没有任何依赖关系的单例中来实现。 例如：

Ext.define('My.Config', {
    singleton: true
    ,config: {
        sid: '123'
    }
    ,constructor: function(config) {
        this.initConfig(config);
    }
});

然后，您可以在其他类中要求此配置单例。 这样可以确保单例类在创建后功能中可用，您可以在其中完成代理的配置。 继续前面的示例：

Ext.define('My.Model', {
    extend: 'Ext.data.Model'
    ,requires: [
        'My.Config'
    ]
    ,config: {
        fields: ['id','name']
    }
}, function(Cls) {
    Cls.setProxy({
        type: 'jsonp'
        ,url: '/myurl'
    });
});

另一个选择是重写代理的getUrl方法，以便及时读取SID。 还有许多其他可能性，但我认为这两种方式更直接，也最不令人惊讶（即，对代码的可维护性有利）。

更新应与您的代码一起使用的解决方案...

我仔细研究了您的代码，但我仍然最初的想法是您正在定义模型或其他东西...无论如何，在您的情况下，上述方法是不够的，因为商店不是该商店的静态成员。数据视图类。 因此，一旦实例化该类，就必须设置此配置。 我建议重写该组件的initialize方法，该方法是专门为这种“后期绑定”设计的。 但是，无需为每个新的视图实例创建代理的新实例...因此，我将在创建后功能中创建一次，在此我们可以访问您的配置单例，并将其绑定时间到商店。

以下代码将为您工作。 我的更改是，我在创建后功能（当您为每个视图实例创建一个代理）中创建了代理，并通过initialize方法将其附加到商店。

Ext.define('MyApp.view.DashboardView',
{
    extend: 'Ext.dataview.DataView',
    xtype: 'dashboardview',
    requires: [
        'MyApp.util.Config',
        'Ext.data.proxy.JsonP'
    ],
    config:
    {
        xtype: 'dataview',
        itemId: "dvitem",
        styleHtmlContent: true,
        itemTpl: [ /* some stuff goes here */ ],
        emptyText: 'More Stuff here',
        listeners:
        {
            element: 'element',
            delegate: '#statusbtn',
            tap: function (item, idx, el, evt)
            {
                // gets the item you tapped
                btnId = el.getAttribute('uniqueId');
                alert("hello " + btnId);
            }
        },

        store:
        {
            autoLoad: true,

            fields: [
                {
                    name: 'sid',
                    type: 'int'
                },
                {
                    name: 'user',
                    type: 'int'
                },
                {
                    name: 'from',
                    type: 'string'
                },
                {
                    name: 'to',
                    type: 'string'
                }

            ]
        }
    }

    ,initialize: function() {
        this.getStore().setProxy(this.proxy);
        this.callParent(arguments);
    }

}, function() {
    // Store it in the prototype
    this.prototype.proxy = new Ext.data.proxy.JsonP({
        url: MyApp.util.Config.getBaseUrl() 
                + '/gettatus.php?sid='
                + MyApp.util.Config.getSid(),
        reader: {
            type: 'json',
            rootProperty: 'element'
        }
    });
});

Answer 2

最终的工作是使用自定义代理类：

Ext.define('MyApp.proxy.MyCustomProxy',
{
extend: 'Ext.data.proxy.JsonP',
alias: 'proxy.mycustomproxy',
buildUrl: function (request)
{
    url = MyApp.util.Config.getBaseUrl() + '/getstatus.php';
    var loginDetails = Ext.getStore('LoginStore');
    loginDetails.load();
    var userId = loginDetails.getAt(0).get('id');
    if (userId != null)
    {
        url = Ext.urlAppend(url, 'uid=' + userId);
    }
    return url;
}
});

并且我将此代理称为常规JSONP代理。