Extjs 4.1 (rc2） - Ext.panel.Panel 上的扩展有时无法完成渲染

Extjs 4.1 (rc2) - Extension on Ext.panel.Panel sometimes does not finish rendering

本文关键字：扩展 rc2 Panel panel Ext Extjs      更新时间：2023-09-26

我在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 方法，但也失败了。

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

我认为您需要创建这个.centerPanel = Ext.create（"Ext.panel.Panel" ， { ...在 initComponent（） 函数中：

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

不在构造函数中。

这个问题与在constructor中设置的类有关，而不是在initComponent中设置。 initComponent是设置类的推荐方法，但构造函数只应在特殊情况下重写。 设置类的方式 如果您的类是使用 renderTo 配置创建的，则可能不会触发 afterrender 事件，该配置将解释有时工作和失败的原因。 

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})
相关文章：