1. #1
    Sencha User chris_nl's Avatar
    Join Date
    Nov 2011
    Location
    Amstedam
    Posts
    34
    Vote Rating
    0
    Answers
    1
    chris_nl is on a distinguished road

      0  

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

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


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



  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,524
    Vote Rating
    873
    Answers
    3563
    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


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

    Code:
    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);
    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 User chris_nl's Avatar
    Join Date
    Nov 2011
    Location
    Amstedam
    Posts
    34
    Vote Rating
    0
    Answers
    1
    chris_nl is on a distinguished road

      0  

    Question


    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
    Code:
    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.
    Code:
     var toptoolbar = Ext.create('Ext.Toolbar', {
                docked: 'top',
                title: 'MAIN TITLE' ,
                 listeners : {                el : {
                        tap : function (e, t) {
                            console.log('tap toolbar?')
                        }
                     }
                }
            }) ;

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Vote Rating
    0
    tasseography is on a distinguished road

      0  

    Default


    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!