Event listeners not working in this example, can someone please take a look at it?

[chrismobile]

Hello, as a study project and to please my father in law I am building a simple static webpage.
The MVC way is to complicated for me at the moment, so I have build something new.

The live demo is on this url:
http://www.le-ri-crystal.nl/spiritue...st/index2.html

The problems that I have are:

Event Listeners are not working anywhere. I tried different ways. The goal is to get the
event tap on the icon buttons at the top. And when It's tapped I fire the setActiveItem method
to change the topbar panel.

Another problem is a visual problem on the home icon. It's should be one icon in stead it looks like it's painted with a repeat x-y

Is there a way for the panel top to dynamically show the arrow_next button, so when the panel is to long the button is placed. And when pressed you can scroll the main items in the panelbar to the left?

Thanks, hope to hear from someone.
Regards, Chris.

Oh, almost forgot to add the code:

Ext.require([
    'Ext.tab.Panel',
    'Ext.Container',
    'Ext.Toolbar',
    'Ext.Button'
]);


Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    fullscreen : true,
    enableAction : true,


    onReady: function() {


        var toptoolbar = Ext.create('Ext.Toolbar', {
            docked: 'top',
            title: 'MAIN TITLE' ,


            listeners : {
                tap : function () {alert('tap toolbar?')}
            }
        }) ;






        toptoolbar.on('tap', function() {alert('tap toolbar')});




       var tabpaneltop =  Ext.create('Ext.tab.Panel', {




           fullscreen: true,
            cardSwitchAnimation: {type: 'slide', duration: 500},
            ui: 'dark',
            styleHtmlContent: true,


              id: 'mycards',
            tabBar: {
                layout: {
                pack : 'center',
                align: 'center'
               },
              docked: 'top',
              scrollable : 'horizontal'
            },


            setScrollable: true,


            items: [
                {
                    title: 'Welkom',
                    id: 'tab1',
                    cls: 'card1',
                    styleHtmlContent: true,
                    contentEl       : 'content'
                },


                {
                    title: 'Activiteiten',
                    id: 'tab2',
                    html: 'Lorem ipsem page 2',
                    cls: 'card2',
                    contentEl : 'bla'
                },
                 {
                    title: 'Contact',
                    id: 'tab3',
                    html: 'Lorem ipsem page 3',
                    cls: 'card3'


                },
                {
                    title: 'Agenda',
                    id: 'tab4',
                    html: 'Lorem ipsem page 4',
                    cls: 'card4'
                },
                {
                    title: 'Fotos',
                    id: 'tab5',
                    html: 'Lorem ipsem page5',
                    cls: 'card5'
                }
            ]
        });


          var nextbtn = Ext.create('Ext.Button', {
             iconCls: 'arrow_right',
            iconMask: true
        }) ;


          var tabBarTop = tabpaneltop.getTabBar();
         tabBarTop.add(nextbtn);


        var tabpanelbottom = Ext.create('Ext.tab.Panel', {




            tabBar: {
                docked: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: false,
            defaults: {
                scrollable: true


            },
            items: [
                {
                    title: 'home',
                    cls:'home',
                    iconCls: 'home',
                    handler: function() {
                        alert("do something");
                    }




                },
                {
                    title: 'activiteiten',
                    iconCls: 'favorites'  ,
                       listeners: {
                    el: {
                      tap: function() {
                          alert('taped') ;
                        console.log('hi!');
                      }
                    }
                  }
                },
                {
                title: 'contact',
                    iconCls: 'contact',
                     listeners: {
                         el : {
                        'tap': function () {
                            alert('tap on icon? not working')
                        }
                          }
                      }
                },
                {
                    title: 'agenda',
                    iconCls: 'agenda'
                },
                {
                    title: 'fotos',
                    iconCls: 'picture'
                },
                 {
                    title: 'bookmark',
                    iconCls: 'bookmarks'
                }
            ]
        });


        var tabBarBottom = tabpanelbottom.getTabBar();


        //trough addListener??
       // toptoolbar.addListener('activate', function() { alert('activate'}, this) ;




       // tabpaneltop.setActiveItem(2);


        Ext.Viewport.add([toptoolbar, tabpaneltop, tabBarBottom])


    }
});

[mitchellsimoens]

Ext.Toolbar doesn't have a tap event. The underlying element does.

var toptoolbar = Ext.create('Ext.Toolbar', {
    docked: 'top',
    title: 'MAIN TITLE',
    listeners : {
        el : {
            tap : function (e, t) {
                console.log('tap toolbar?')
            }
         }
    }
});

toolbar.element.on('tap', someFn, toolbar);

[chrismobile]

thanks Mitchell, but the listener in the Toolbar, was just for a testing.
I was trying to listen to the events on the buttons, on the bar at the bottom.
I could not get it to work using different listeners approach

Also, in your example only the option

toptoolbar.element.on('tap', someFn, toptoolbar);

seems to fire up an event. The other one does not work. I will do a seperate test with only a
ToolBar and if it does not work I fill in the bugs form to keep you updated.

 var toptoolbar = Ext.create('Ext.Toolbar', {
            docked: 'top',
            title: 'MAIN TITLE' ,
             listeners : {                el : {
                    tap : function (e, t) {
                        console.log('tap toolbar?')
                    }
                 }
            }
        }) ;

[tasseography]

apparently adding listeners through a config attribute is not fully supported as of PR3.

See:
http://www.sencha.com/forum/showthre...ight=listeners
and
http://www.sencha.com/forum/showthre...ng-addListener

Posting this as a mental note to myself, too!