0

我有一个在 Ext.panel.Panel 上扩展的类。

简化代码：

Ext.define("some.namespace.MyOwnPanel", { 
    extends: "Ext.panel.Panel",

    constructor: function (config) {
        var me = this;

        Ext.apply(this, config);
        this.callParent(arguments);

        this.layout = "border";

        this.centerPanel = Ext.create("Ext.panel.Panel" , {
            region: "center",
            layout: "fit",
            border: false
        });

        this.westPanel = Ext.create("Ext.panel.Panel", {
            region: "west",
            layout: "fit",
            border: false
        });

        this.add(this.centerPanel);
        this.add(this.westPanel);

        this.on("afterrender", function () {
            // create grid for center panel. Data is loaded with AJAX in that function and the component is also added to this.centerPanel
            me.createGrid();
        });
    }
}

有时它可以工作并触发 afterrender 事件，但有时它不起作用，然后 Web 应用程序崩溃。没有给出错误，但任何 ext 组件的创建都会在该点之后停止。

我已经尝试了很多东西。原始代码大部分是由同事编写的，其中有更多与 4.1 兼容的 Extjs 3.1 代码的痕迹。我尝试将其重写为正确的 4.1 代码，但没有成功。我试图将代码移动到 initComponent 方法，但也失败了。

我对如何解决这个问题没有更多的想法。有没有人遇到过这样的事情，你是怎么做的？请告诉我！

4

2 回答 2

1

我认为您需要在 initComponent() 函数中创建 this.centerPanel = Ext.create("Ext.panel.Panel" , { ...

initComponent: function() {
    Ext.apply(this, {
        centerPanel: Ext.create("Ext.panel.Panel" , { ... },
        ...
    });
    this.callParent(arguments);
}

不在构造函数中。

于 2013-01-25T19:58:27.027 回答
1

这个问题与在constructor而不是initComponent. initComponent是设置类的推荐方式，构造函数只应在特殊情况下被覆盖。如果您的课程是使用可以解释有时工作和失败的配置 创建的，则该课程的设置方式afterrender可能不会触发事件。renderTo

Ext.define('Bad', {
    extend: 'Ext.Component',
    constructor: function() {
        //the parent constructor is called here and if renderTo 
        // is defined it will render before the afterrender listener is added
        this.callParent(arguments);
        this.on('afterrender', function(){
            window.alert('rendered')
        })
    }
})

var works = new Bad();
//this will alert rendered
works.render(document.body)

//this wont
new Bad({renderTo: document.body})

Ext.define('Good', {
    extend: 'Ext.Component',
    //change constructor to initComponent
    initComponent: function() {
        this.callParent(arguments);
        this.on('afterrender', function(){
            window.alert('rendered')
        })
    }
})

//alerts 
new Good({renderTo: document.body})
于 2013-01-25T22:09:44.450 回答