extjs 4 Designer 1.2 网格渲染器

Question

我正在使用 extjs 设计器 1.2。我在面板上有一个按钮，点击时会打开窗口。该窗口有网格，我在 js 文件中应用了渲染器，如下所示。问题是第一次打开窗口时渲染器效果很好，但是当我关闭窗口并重新打开它时，效果就消失了。

Ext.define('MyApp.view.TestWindow', {
    extend: 'MyApp.view.ui.TestWindow',

initComponent: function() {
    var me = this;
    me.callParent(arguments);

}

 });

================================================ =============================

Ext.define('MyApp.view.TestPanel', {
    extend: 'MyApp.view.ui.TestPanel',

initComponent: function() {
    var me = this;
    me.callParent(arguments);
    Ext.data.StoreManager.lookup('Test').load();
    me.down('button[id=testbutton]').on('click',me.onTestBtnClick,me); 
},

onTestBtnClick:  function(){

    var win = new Ext.create('MyApp.view.TestWindow');
    win.show();
    win.down('#testgrid').columns[0].renderer=function(val){
         return '<span style="color:red;">' + val + '</span>';
        }

}
});

观察： 当我在 ui.js 中使用渲染器时，即从设计器导出项目生成的文件时，我不会遇到上述问题。有什么办法可以解决这个问题？

Answer 1

我已经解决了由Ext.Window 的closeAction 配置选项引起的类似问题（在您的情况下为MyApp.view.TestWindow） 设置为hide，而不是destroy （Ext JS 4 默认）。您图示的按钮单击事件处理程序在每次触发时都会实例化一个新的Ext.Window （在您的情况下为MyApp.view.TestWindow）。如果这些实例未正确创建和销毁，您可能会遇到 DOM ID 争用和不良结果。

如果您的目标是保留此类实例，那么无论您当前配置选项的状态如何，一种更好的方法是将您的实例化逻辑重新定位到全局范围，并且只管理 showing 和 hide在您的按钮单击事件处理程序中调用此组件。

因为您没有提供底层的 MyApp.view.TestWindow 逻辑，我只能假设您的问题的根本原因确实与配置错误的配置选项和/或组件实例管理的组合有关，最终导致组件竞争对于同一个 DOM ID。

要注意的另一件事是使用静态定义的id 配置选项。如果您在任何组件上静态定义 id 配置选项，则必须确保这些组件是单例，或者它们的实例分配在全局范围内以供重用。同样，这一切都归结为正确的组件管理。

最后，使用我的建议也有可能不会揭示您的MyApp.view.TestWindow 特有的任何明显问题。如果是这种情况，请检查并确保没有任何底层 MyApp.view.TestWindow 子组件（网格、列模型、列等）是罪魁祸首。

编辑

下面是一个例子：

Ext.define('MyApp.view.TestPanel', {
    extend: 'MyApp.view.ui.TestPanel',

initComponent: function() {
    var me = this;
    me.callParent(arguments);
    Ext.data.StoreManager.lookup('Test').load();
    me.down('button[id=testbutton]').on('click',me.onTestBtnClick,me);

    me.testWindow = new Ext.create('MyApp.view.TestWindow');
    me.testWindow.down('#testgrid').columns[0].renderer=function(val){
        return '<span style="color:red;">' + val + '</span>';
    }
},

onTestBtnClick:  function(){
    var me = this;
    me.testWindow.show();
}
});