1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    25
    Vote Rating
    1
    Answers
    1
    Frank345 is on a distinguished road

      0  

    Default Answered: How to add button listener in panel with customer html layout

    Answered: How to add button listener in panel with customer html layout


    Hi,

    I have an Ext.Panel that sets up its html property for a customer html layout. But how do I setup listeners to react on buttons or links.

    Code:
    Ext.define('app.view.Example', {
        extend: 'Ext.Panel',
        xtype: 'example',
        alias: 'example',
        config: {
            scrollable: true,
            html: 
                '<div>'+
                '<a id="buttonExample" href="#" class="buttonExample">do something</a>'+
                '</div>'
        }
    }
    Thanks,
    Frank

  2. That is because the control method uses ComponentQuery, and because you are just creating your button using HTML, it cannot find a component using that Id.

    If you cannot use an actual Ext.Button, you will need to add custom logic into your view. I suggest you add a listener like suggested above, fire an event, and then listen to that event in your controller.

  3. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    12
    Vote Rating
    0
    Answers
    1
    heretic is on a distinguished road

      0  

    Default


    Something like this might work for you:
    Code:
    initialize: function() {
    
    
        //...
        this.element.on({
            scope      : this,
            tap        : 'onTap'
        });
        this.callParent(arguments);
    },
    onTap: function(e, btn) {
        //add your code here to check which button, etc...
    },

  4. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    25
    Vote Rating
    1
    Answers
    1
    Frank345 is on a distinguished road

      0  

    Default


    Hello heretic,

    that works perfectly fine. Thanks a lot.

    However, I am also trying something else. Following Tommy Maintz' idea of an MVC architecture that separates view and controller, the code that is listening for buttons and links should ideally be located in the controller (unless it is view-only stuff). So I am trying this...

    app/app.js
    Code:
    Ext.application({
        name : 'app',
        controllers: ['MyController'],
        ...
    });
    app/controller/MyController.js
    Code:
    Ext.define('app.controller.MyController', {
        extend: 'Ext.app.Controller',
        views: ['MyView'],
        init: function() {
            this.control({
                '#mybutton': {
                    click: this.dosomething,
                }
            });
        },
        dosomething: function() {
            Ext.Msg.alert('Title', 'Yippee', Ext.emptyFn);
        }
    });
    app/view/MyView.js
    Code:
    Ext.define('app.view.MyView', {
        extend: 'Ext.Panel',
        xtype: 'myview',
        alias: 'myview',
        config: {
            scrollable: true,
            html: 
                '<div>'+
                '<a id="mybutton" href="#" class="mybutton">do something</a>'+
                '</div>'
        }
    });
    Unfortunately, the listener code is not being called. What am I doing wrong?
    Or is there any reason why this approach would not work with custom html panels?

    Cheers,
    Frank

  5. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    Answers
    93
    rdougan will become famous soon enough

      0  

    Default


    That is because the control method uses ComponentQuery, and because you are just creating your button using HTML, it cannot find a component using that Id.

    If you cannot use an actual Ext.Button, you will need to add custom logic into your view. I suggest you add a listener like suggested above, fire an event, and then listen to that event in your controller.

Thread Participants: 2