1

我正在使用 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 中使用渲染器时，即通过从设计器导出项目生成的文件，我没有遇到上述问题。有什么办法可以解决这个问题？

4

1 回答 1

1

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

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

因为您没有提供底层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();
}
});
于 2011-09-22T06:44:03.127 回答