Question

我正在尝试在Sencha Touch框架中扩展Ext.Container对象，以添加一些我需要的额外属性，其中一个是通过AJAX加载文件。

App.Ext.AContainer = Ext.extend(Ext.Container, {
ajax : false,
doAjax : function(p, that) {
    Ext.Ajax.request({
        url : p,
        method : 'POST',
        success : function(result) {
            Ext.apply(that, {
                html : result.responseText
            })
        },
        failure : function(result) {
            Ext.Msg.alert('ERROR : AJAX : Could not load ' + p);
        }
    })
},
constructor : function(b) {

    if( b.ajax === true && b.hasOwnProperty('rhtml')) {
        this.doAjax(b.rhtml, this);
    }

    App.Ext.AContainer.superclass.constructor.call(this, b);

    console.log(this);

}
});

该Container的实际实现是：

var servicesContainer = new App.Ext.AContainer({
  scroll : 'vertical',
  ajax : true,
  rhtml : 'test.html'
});

基本上，我的想法是有一个方法负责加载文件，然后手动将其复制到html属性。当我检查控制台输出'this'时，它显示html属性是使用正确的标记设置的，但它不会将标记呈现给页面。

不确定我做错了什么。

Answer 1

查看构造函数中的if。它调用doAjax，然后在其参数中使用Ext.Ajax.request函数调用success。 request function documentation说：

Important: Ajax server requests are asynchronous, and this call will
     * return before the response has been received. Process any returned data
     * in a callback function.

这意味着在加载完成之前，控制流会立即返回到构造函数（我想甚至在发送请求之前）。

因此，在调用console.log时，请求（以及success函数）尚未执行。

<强> TL; DR ：将console.log调用移至success功能。

Answer 2

此外，没有必要将范围传递给doAjax，而是：

App.Ext.AContainer = Ext.extend(Ext.Container, {
    ajax: false,
    doAjax: function (p) {
        Ext.Ajax.request({
            url: p,
            method: 'POST',
            scope: this,
            success: function (result) {
                this.html = result.responseText;
            },
            failure: function (result) {
                Ext.Msg.alert('ERROR : AJAX : Could not load ' + p);
            }
        })
    },
    constructor: function (b) {

        if (b.ajax === true && b.hasOwnProperty('rhtml')) {
            this.doAjax(b.rhtml);
        }

        App.Ext.AContainer.superclass.constructor.call(this, b);

        console.log(this);

    }
});

扩展Sencha Touch对象

2 个答案: