1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    18
    Vote Rating
    0
    tvance929 is on a distinguished road

      0  

    Default Unanswered: Cant get events to fire on Home panel - Ext.panel

    Unanswered: Cant get events to fire on Home panel - Ext.panel


    Ran through the MVC1 video, now trying to expand my knowledge... I wanted to get my controller to respond to events in my homepanel but that didnt work so I tried to follow the example in Events section of the docs and it still not doing anything.

    Here is my homepanel :
    Code:
    Ext.define('SenchTest.view.Home', {
    	extend : 'Ext.Panel',
    	xtype : 'homepanel',
    	id : 'homePanel',
    	fullscreen: true,
    
    
        listeners: {
            painted: function() {
                Ext.Msg.alert('I was painted to the screen');
            }
        },
    
    
    	config : {
    		title : 'Home',
    		iconCls : 'home',
    		cls : 'home',
    		html : '<h1>Hi this is my mobile application!</h1>'
    	},
    
    
    	// listeners : {
    		// painted : function () {
    			// console.log('doink');
    		// }, 
    		// heightchange: function() {
    			// alert('test');
    		// },
    		// initialize: function() {
    			// alert('bogus');
    		// },
    		// hide: function() {
    			// alert('hide');
    		// }
    	// }
    });
    None of the commented out events would do anything so I just added the PAINTED from the docs and it doesnt do anything either ... I GET NO ERRORS in my code btw.

    My controller looked like this (this is what I really want to use as this is where all this logic will be in the end):

    Code:
    views : ['Home', 'Products', 'Blog', 'Contact'],
    
    
    	config : {
    		refs : {
    			contactForm : '#contactForm',
    			homePanel : '#homePanel'
    		},
    		control : {
    			homePanel : {
    				heightchange : 'homePainted'
    			},
    			'button[action=submitContact]' : {
    				tap : 'submitContactForm'
    			}
    		},
    Can anyone clue me in here?

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    what version of ST are you using? also do you have some more code to play with (the whole controller class)?

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    18
    Vote Rating
    0
    tvance929 is on a distinguished road

      0  

    Default


    2-2 :

    I have been able to get the controller to respond to an event on a button in the homepanel ...but just cannot seem to get events on the panel (or even on the viewport)

    Here is my controller now: AGAIN, the Button stuff is working but the painted event on the homepanel is not:
    Code:
    Ext.define('SenchTest.controller.Main', {
        extend : 'Ext.app.Controller',
    
        views : ['Home', 'Products', 'Blog', 'Contact'],
    
        config : {
            refs : {
                contactForm : '#contactForm',
                homePanel : '#homePanel'
            },
            control : {
                homePanel : {
                    painted : 'homePainted'
                },
                'button[action=submitContact]' : {
                    tap : 'submitContactForm'
                },
                'button[action=homeExample]' : {
                    tap : 'homePainted'
                }
            }
        },
    
        submitContactForm : function () {
            var form = this.getContactForm();
            form.submit({
                url : 'contact.php'
            });
        },
    
        homePainted : function () {
            console.log('I was painted to the screen');
        }
    });
    ** I wonder -- Can I not call events on whole Views? Just on buttons and stuff inside of the views?

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    ok, don't know V2.2...

    I checked a few of my controllers and it seems I never use 'painted'. I think I tried once but didn't get it to work. So instead I use 'activate' in a few places which does the job for me.

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    18
    Vote Rating
    0
    tvance929 is on a distinguished road

      0  

    Default


    Ive tried several of the events listed in the API (heightchange, hide, show) ... havent been able to get any of them to do anything ... painted is the one actually used in the example doc:

    Code:
    Ext.create('Ext.Panel', {
        html: 'My Panel',
        fullscreen: true,
    
    
        listeners: {
            painted: function() {
                Ext.Msg.alert('I was painted to the screen');
            }
        }
    });
    The only difference in my code is I dont CREATE the views... in the MVC video they DEFINE the views and CREATE the viewport in the APP.js. Not sure if this is the problem or not.

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    Quote Originally Posted by tvance929 View Post
    The only difference in my code is I dont CREATE the views... in the MVC video they DEFINE the views and CREATE the viewport in the APP.js. Not sure if this is the problem or not.
    I don't think so. I do all my projects only in MVC style and all is working fine...

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    I don't know, how you call your HOME view. But when I do it with your view and your controller, then the controller is logging with the activate event, but not with the painted event.

    29-03-2013 22-31-04.png

  8. #8
    Sencha User
    Join Date
    Feb 2011
    Posts
    57
    Vote Rating
    2
    Answers
    1
    Hertz is on a distinguished road

      1  

    Default


    Be sure to read the note in the painted event documentation:

    "Note: This event is not available to be used with event delegation. Instead painted only fires if you explicitly add at least one listener to it, for performance reasons."

    In order to listen for this event, you need to add an event listener to your panel, for example, you could listen for the initialize event of your panel and add it there:

    Code:
    panelInitialize: function(obj, eOpts){
    obj.addListener('painted', this.panelPainted, this);
    }, panelPainted: function(obj, eOpts){
    // your code here
    }

  9. #9
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    Answers
    41
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      1  

    Default


    cool - works! And I learned something new - thanks.

    So I was using this view
    Code:
    Ext.define('SenchTest.view.Home', {
        extend : 'Ext.Panel',
    
    
        xtype : 'homepanel',
    
    
        config : {
            fullscreen: true,
            title : 'Home',
            iconCls : 'home',
            cls : 'home',
            html : '<h1>Hi this is my mobile application!</h1>'
        }
    
    
    });

    and this controller
    Code:
    Ext.define('SenchTest.controller.Home', {
        extend : 'Ext.app.Controller',
    
    
        config: {
            refs: {
                homePanel: 'homepanel'
            },
            control: {
                homePanel: {
                    initialize: 'homeInitialized',
                    activate: 'homeActivated'
                }
            }
        },
    
    
        homeInitialized: function(obj, eOpts){
            obj.addListener('painted', this.homePainted, this);
        },
    
    
        homePainted: function(obj, eOpts){
            console.log('controller: I was painted to the screen');
        },
    
    
        homeActivated: function() {
            console.log('controller: I was activated to the screen');
        }
    });

  10. #10
    Sencha User
    Join Date
    Dec 2012
    Posts
    32
    Vote Rating
    3
    Answers
    2
    alanthales is on a distinguished road

      1  

    Default


    It works for me:

    Code:
    Ext.define('App.view.Test', {
    	extend: 'Ext.Panel',
    	xtype: 'viewtest',
    	
    	config: {
    		title: 'Test',
    		
    		listeners: {
    			painted: function(element) {
                                console.log('View test painted');
    			}
    		}
    	}
    });
    ensure that listeners are within the config...

Thread Participants: 3

Tags for this Thread