Grid extjs 4 designer 1.2网格渲染器

我正在使用extjs designer 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>';
        }

}
});

Ext.define（'MyApp.view.TestPanel'{
扩展：“MyApp.view.ui.TestPanel”，
initComponent:function（）{
var me=这个；
me.callParent（参数）；
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）{
返回“+val+”；
}
}
});

---

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

我已经解决了我的

Ext.Window

（

MyApp.view.TestWindow

）的

closeAction

配置选项设置为

hide

（Ext JS 4默认设置）所导致的类似问题。每次触发新的

Ext.Window

（

MyApp.view.TestWindow

，您的示例按钮单击事件处理程序都会实例化它。如果没有正确创建和销毁这些实例，您可能会遇到DOM

ID

争用和不希望的结果

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

显示
和
隐藏
初始化

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

另一件需要注意的事情是使用静态定义的
id
config选项。如果在任何组件上静态定义
id
config选项，则必须确保这些组件要么是单例，要么是在全局范围内分配的实例，以便重用。同样，这一切归结为适当的组件管理

最后，使用我的建议也可能不会揭示任何与您的
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();
}
});

Ext.define（'MyApp.view.TestPanel'{
扩展：“MyApp.view.ui.TestPanel”，
initComponent:function（）{
var me=这个；
me.callParent（参数）；
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）{
返回“+val+”；
}
},
onTestBtnClick:function（）{
var me=这个；
me.testWindow.show（）；
}
});
我已经解决了我的
Ext.Window
（
MyApp.view.TestWindow
）的
closeAction
配置选项设置为
hide
，而不是
destroy
（Ext JS 4默认设置）所导致的类似问题。每次触发新的
Ext.Window
（
MyApp.view.TestWindow
，您的示例按钮单击事件处理程序都会实例化它。如果没有正确创建和销毁这些实例，您可能会遇到DOM
ID
争用和不希望的结果

如果您的目标是持久化这些实例，那么无论当前配置选项的状态如何，更好的方法是将实例化逻辑重新定位到全局范围，并且只在按钮单击事件处理程序中管理该组件的
显示
和
隐藏
初始化

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

另一件需要注意的事情是使用静态定义的
id
config选项。如果在任何组件上静态定义
id
config选项，则必须确保这些组件要么是单例，要么是在全局范围内分配的实例，以便重用。同样，这一切归结为适当的组件管理

最后，使用我的建议也可能不会揭示任何与您的
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();
}
});

Ext.define（'MyApp.view.TestPanel'{
扩展：“MyApp.view.ui.TestPanel”，
initComponent:function（）{
var me=这个；
me.callParent（参数）；
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=funct