Question

i m working with extjs designer 1.2. I have a button on panel that opens window on click. The window has grid for which i have applied renderer as following in js file . The problem is renderer works well when the window opens up for first time, but when i close window & reopen it, the effect goes off.

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>';
        }

}
});

Observation : When i use renderer in ui.js i.e. the file generated by exporting project from designer, i dont face above stated problem. What can be solution for this problem?

Answer 1

I’ve resolved similar issues caused by the closeAction config option of my Ext.Window (MyApp.view.TestWindow in your case) being set to hide, instead of destroy (Ext JS 4 default). Your illustrated button click event handler instantiates a new Ext.Window (MyApp.view.TestWindow in your case) every time it is fired. If these instances are not created and destroyed properly you may experience DOM ID contention and undesirable results.

If your goal is to persist such instances a better approach, regardless of the state of your current config options, would be for you to relocate your instantiation logic to a global scope and only manage the showing and hideing of this component in your button click event handler.

Because you have not provided the underlying MyApp.view.TestWindow logic, I am only left to assume that the root cause of your issue does pertain to a combination of either misconfigured config options and/or component instance management, ultimately resulting in components contending for the same DOM ID.

Another thing to be mindful of is the use of statically defined id config options. If you are statically defining an id config option on any component you must ensure that those components are either singletons, or their instances assigned in a global scope for reuse. Again, this all boils down to proper component management.

Lastly, it is also a possibility that the use of my suggestion does not reveal any glaring issues specific to your MyApp.view.TestWindow. If this is the case, inspect and ensure that none of the underlying MyApp.view.TestWindow child components (grid, column model, column, etc.) are culprit.

EDIT

Below is an example:

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();
}
});