Event not reaching controller second time

[manpreet.singh]

I have a Sencha Touch 2 configuration set up. My main view (say 'Main') is a navigation view. On click of a button, I push a panel (say 'Test') to the navigation view. On click of back button on 'Test', I pop 'Test' from 'Main'.
There is a controller ( say 'MyController') which is listening to the paint event of 'Test'. Now handler of this event is only called first time 'Test' is painted. If I click on Back and then click to show 'Test' again, handler is not called. There is no JS error either. If I keep the event handler in 'Test' view itself, everything is fine. Any suggestions to enable controller listen to event all the times.


Below is the code.

Ext.define('TEST.view.Main', {
    extend: 'Ext.navigation.View',
    alias: 'widget.Main',


    config: {
        id: 'Main',
        navigationBar: {
            items: [
                {
                    xtype: 'button',
                    itemId: 'mybutton',
                    text: 'Show',
                    align: 'right'
                }
            ]
        },
        items: [
            {
                xtype: 'formpanel',
                items: [
                    {
                        xtype: 'checkboxfield',
                        label: 'Field'
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onMybuttonRelease',
                event: 'release',
                delegate: '#mybutton'
            }
        ]
    },


    onMybuttonRelease: function(button, e, options) {
        Ext.getCmp('Main').push(Ext.create('TEST.view.Test'));
    }


});


Ext.define('TEST.view.Test', {
    extend: 'Ext.Panel',
    alias: 'widget.Test',


    config: {
        id: 'Test',
        layout: {
            type: 'vbox'
        }
    }


});


Ext.define('TEST.controller.MyController', {
    extend: 'Ext.app.Controller',
    config: {
        control: {
            "#Test": {
                painted: 'onPanelPainted'
            }
        }
    },


    onPanelPainted: function(component, options) {
        alert('Test is being painted');
    }


});

[bluehipy]

Maybe the object is reused and the paint is not happening second time in your scenario?

Using id in config of classes is not a good idea

Ext.define('TEST.view.Test', 
{    
extend: 'Ext.Panel',    
alias: 'widget.Test',    
xtype:'xtest' ,
    config: {      
  id: 'Test',
        layout: {            type: 'vbox'        }
    }
}
);

instead you can use in controller the xtype or alias, you being interested by the paint event of the object of that type

Ext.define('TEST.controller.MyController', 
{    
extend: 'Ext.app.Controller',   
 config: {       
 control: {        
    "xtest": {             
   painted: 'onPanelPainted'     
       }     
   }  
  }, 
   onPanelPainted: function(component, options) {        alert('Test is being painted');  
  }
}
);

[manpreet.singh]

Maybe the object is reused and the paint is not happening second time in your scenario?

If this was the case then event wouldn't have been handled second time after I move event listener to view itself, as below. But with below code, event is fired everytime view gets painted.

Ext.define('TEST.view.Test', {    extend: 'Ext.Panel',
    alias: 'widget.Test',


    config: {
        id: 'Test',
        layout: {
            type: 'vbox'
        },
        listeners: [
            {
                fn: 'onTestPainted',
                event: 'painted'
            }
        ]
    },


    onTestPainted: function(component, options) {
        alert('Test is being painted');
    }


});

[bluehipy]

I got the feeling that removing that id will make the event fire and being caught in all cases no matter if listener is defined in view or in controller

[manpreet.singh]

I got the feeling that removing that id will make the event fire and being caught in all cases no matter if listener is defined in view or in controller

Thanks for the suggestion. Somehow my browser didn't initially bring the code you suggested. After refreshing again it did show code. I tried your code now. Unfortunately it also didn't work.

[Sn4k3]

Hey,

I would have suggested to use the painted event that is being thrown by the panel as follow:

Ext.define('TEST.view.Test', {
    extend: 'Ext.Panel',
    alias: 'widget.Test',


    config: {
        id: 'Test',
        layout: {
            type: 'vbox',
        },
        items: [
            {
                xtype: 'label',
                html: 'test'
            }
        ]
    },

    painted: function(component, eOpts) {
        console.log('The test painel is painted');
    }
});

but that doesn't seems to work. So I would suggest to use the initialize event that is being thrown everytime the Test panel is created:

Ext.define('TEST.view.Test', {
    extend: 'Ext.Panel',
    alias: 'widget.Test',


    config: {
        id: 'Test',
        layout: {
            type: 'vbox',
        },
        items: [
            {
                xtype: 'label',
                html: 'test'
            }
        ]
    },
    
    initialize: function(view, eOpts) {
        console.log('intialized');
    },
});

Hope that solves your problem.

[bluehipy]

Unfortunately you discovered a bug

looks like painted event is not caught in the controller, maybe we should report that.


I've made a test case here:
http://www.senchafiddle.com/#5zunm


all other events are working fine.