Results 1 to 4 of 4

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

  1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    25
    Answers
    1
    Vote Rating
    1
      0  

    Default 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
    Answers
    1
    Vote Rating
    0
      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
    Answers
    1
    Vote Rating
    1
      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 User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93
    Vote Rating
    7
      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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •