1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    manpreet.singh is on a distinguished road

      0  

    Default Unanswered: Event not reaching controller second time

    Unanswered: Event not reaching controller second time


    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.


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

  2. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    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

    Code:
    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

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

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    manpreet.singh is on a distinguished road

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    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.

    Code:
    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');
        }
    
    
    });

  4. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    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

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    manpreet.singh is on a distinguished road

      0  

    Default


    Quote Originally Posted by bluehipy View Post
    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.

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    17
    Vote Rating
    1
    Sn4k3 is on a distinguished road

      0  

    Default


    Hey,

    I would have suggested to use the painted event that is being thrown by the panel as follow:
    Code:
    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:

    Code:
    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.

  7. #7
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    606
    Answers
    66
    Vote Rating
    26
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    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.