Events not working after dinamic Delete View and Create New View

[hectorgomis]

I'm developing a simple ST2 App. I have a modal view showed "onbuttontap", but after user taps "Accept", I delete this modal view. When user wants to open the modal view again, I create this view (no problem), but after it is showed to the user, the events of the buttons are not working. I'm using ST2.2.0 and ST2.1.0, and are not working in both. I think there is a bug with events, because are not firing again.

Main view

Ext.define('App.view.Main', {
    extend: 'Ext.Panel',

    config: {
        height: '100%',
        width: '100%',
        items: [
                       {
                        xtype: 'button',
                        id: 'btnShowModal',
                        text: 'Show Modal'
                        }
                ]
            }
});

Modal view

Ext.define('App.view.Popup', {
    extend: 'Ext.Panel',

    config: {
        centered: true,
        height: '80%',
        id: 'popup',
        width: '80%',
        modal: true,
        hideOnMaskTap: true,
        scrollable: true,
        items: [
                       {
                        xtype: 'button',
                        id: 'btnAccept',
                        ui: 'confirm',
                        text: 'Accept'
                        }
                ]
            }
});

Main Controller

Ext.define('App.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            "#btnAccept" : {
                tap: 'onBtnAcceptTap'
            },
            "#btnShowModalTap": {
                tap: 'onBtnShowModalTap'
            }
        }
    },
   
    onBtnAcceptTap: function(button, e, eOpts) {
        Ext.Viewport.remove(Ext.getCmp('popup'), true);
    },

    onBtnShowModalTap: function(button, e, eOpts) {
        if(Ext.getCmp('popup'))
        {
            Ext.Viewport.remove(Ext.getCmp('popup'), true);
        }
        var view = Ext.create('ClaveiSAT.view.Popup');
        Ext.Viewport.add(view);
    }
});

I've found a way to solve it, but I don't really like. This way consist to move the controller logic to the view side. In this case, the event are working everytime like that:

// at the end of the view 


        listeners: [
            {
                fn: 'onBtnAcceptTap',
                event: 'tap',
                delegate: '#btnAccept'
            }
        ]
    },
    onBtnAcceptTap: function(button, e, eOpts) {
             Ext.Viewport.remove(Ext.getCmp('popup'), true);
    }

[mitchellsimoens]

Does it help if you stop using the id config and use a selector with xtypes and properties?

[hectorgomis]

Can you give an example, please?