扩展Sencha Touch对象

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);

}
});

随着该容器的实际实现是：

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

基本上，我的想法是拥有一种方法，该方法负责加载文件，然后手动将其复制到html属性。 当我从输出“ this”检查控制台时，它表明html属性已使用正确的标记进行设置，但未将标记呈现给页面。

不太确定我在做什么错。

Answer 1

查看构造函数中的if 。 它调用doAjax ，而后者依次在参数中调用success函数Ext.Ajax.request 。 request功能文档说：

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);

    }
});