1. #1
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    cyberwombat is on a distinguished road

      0  

    Default Unclear how to implement afteritemchange listener

    Unclear how to implement afteritemchange listener


    I have a tabpanel and I would like to implement the afteritemchange event listener but not clear where to do so and cannot find examples.

    I thought this would work but I am missing something. Also - my goal is to destroy panel as they are changed - It seems the afteritemchange has issues with animation (saw on another forum) - not sure if that is best approach for my goal?

    Code:
    Ext.define('App.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        config: {
            activeTab: 0,
            fullscreen: true,
            flex: 1,
            layout: {
                animation: {
                    type: 'slide',
                    duration: 250
                }
            },
            tabBar: {
                layout: {
                    pack : 'center',
                    align: 'center'
                },
                docked: 'bottom',
                scrollable: {
                    direction: 'horizontal',
                    indicators: false
                }
            },
            items: [
               ...
            ],
            listeners: {
                activeitemchange: function(a, b, c, d) { 
                    alert('f');
                }
            }
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Is it firing? If not, try putting it where you instantiate the view and put the listener there.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by cyberwombat View Post
    I have a tabpanel and I would like to implement the afteritemchange event listener but not clear where to do so and cannot find examples.

    I thought this would work but I am missing something. Also - my goal is to destroy panel as they are changed - It seems the afteritemchange has issues with animation (saw on another forum) - not sure if that is best approach for my goal?

    Code:
    Ext.define('App.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        config: {
            activeTab: 0,
            fullscreen: true,
            flex: 1,
            layout: {
                animation: {
                    type: 'slide',
                    duration: 250
                }
            },
            tabBar: {
                layout: {
                    pack : 'center',
                    align: 'center'
                },
                docked: 'bottom',
                scrollable: {
                    direction: 'horizontal',
                    indicators: false
                }
            },
            items: [
               ...
            ],
            listeners: {
                activeitemchange: function(a, b, c, d) { 
                    alert('f');
                }
            }
        }
    });
    Actually seems that listeners are not accepted on component definition, however, if you add your listeners on component creation, they works great.
    Take a look at your edited code:

    Code:
    Ext.Loader.require(['Ext.*']);
    
    
    Ext.application({
        name: 'App',
        launch: function() {
    
    
    		Ext.define('App.view.Main', {
    		    extend: 'Ext.tab.Panel',
    		    alias: 'widget.main',
    		    config: {
    		        activeTab: 0,
    		        fullscreen: true,
    		        flex: 1,
    		        layout: {
    		            animation: {
    		                type: 'slide',
    		                duration: 250
    		            }
    		        },
    		        tabBar: {
    		            layout: {
    		                pack : 'center',
    		                align: 'center'
    		            },
    		            docked: 'bottom',
    		            scrollable: {
    		                direction: 'horizontal',
    		                indicators: false
    		            }
    		        },
    		        items: [
    					{
    						title: 'first',
    						iconMask: true,
    						iconCls: 'star',
    						html: '1'
    					},
    					{
    						title: 'second',
    						iconMask: true,
    						iconCls: 'star',
    						html: '2'
    					}
    		        ],
    		    }
    		});
    		
    		Ext.widget('main',{
    			listeners: {
    	            activeitemchange: function(a, b, c, d) { 
    	                alert('changed');
    	            }
    	        }
    		});
    		
        }
    });
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #4
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    I HOPE that this is a bug. Surely we should be able to continue to add listeners in definitions right? Has this bug already been reported?
    Twitter: lylepratt

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    constructor: function(config) {
        this.callParent(arguments);
    
        this.on('event', this.someFunction, this);
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    Thanks for the tip Mitchell. I've already implemented something similar in a new project for now. However, the reason why I consider it a bug is because many people, including my self have thousands of lines of code written which rely on being able to configure listeners in definitions. I understand it may not be implemented yet, but I hope it will be by the general release.
    Twitter: lylepratt

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I disagree that this is a bug. It's not a good idea to use the listeners property in a definition as when you instantiate that class and use the listeners as a config, the listeners property you used when you defined the class will now be overwritten and not used and that could break your class if you depend on those listeners.

    this.on is the proper way to add listeners when defining a class.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    I think that's a matter of preference, but if that is the official response then the documentation needs to be changed. The documentation lists "listeners" as a configuration option.
    Twitter: lylepratt

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by lylepratt View Post
    I think that's a matter of preference, but if that is the official response then the documentation needs to be changed. The documentation lists "listeners" as a configuration option.
    It is a configuration option:

    Code:
    Ext.create('Ext.tab.Panel', {
        ...
    
        listeners : {   //config option
            afteritemchange: function() {}
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    Why should that work with Ext.create and NOT Ext.define?
    Twitter: lylepratt