extjs 4設計師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（你的情況MyApp.view.TestWindow）被設置爲hide的closeAction配置選項造成的，而不是destroy（Ext JS的4默認），類似的問題。您的插圖按鈕點擊事件處理程序會在每次觸發時實例化一個新的Ext.Window（您的案例中爲MyApp.view.TestWindow）。如果這些實例沒有正確創建和銷燬，您可能會遇到DOM ID爭用和不良結果。

如果你的目標是堅持這樣的情況下更好的方法，不管你目前的配置選項的狀態下，會爲你重新定位你的實例化邏輯，一個全球範圍內，只有管理的這個show ING和hide ING組件在你的按鈕點擊事件處理程序。

由於您沒有提供邏輯基礎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(); 
} 
});