Button Tap Event in Created Ext.Panel does not fire / execute

[Chaoz]

var panel = Ext.create('Ext.Panel', {
    width: 200,
    height: 200,
    layout: 'fit',

    items: {
        xtype: 'button',
        text: 'test',
        listeners: {
            tap: function() {
                alert("test");
            }
        }
    }
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.Viewport.add(panel);
        Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
        
    }
}); 

The code above I tested in JSFiddle using Sencha Touch 2.4.1 Crisp.
The alert is never fired. Though if I change the Ext.application to...

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.Viewport.add({
        xtype: 'button',
        text: 'test',
        listeners: {
            tap: function() {
                alert("test");
            }
        }
    });
        Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
        
    }
}); 

adding the button right away, the button event is executed.
Is this working as intended?


Thanks

[mitchellsimoens]

You shouldn't create a component before the launch method fires, you are creating the panel and the button before it. In this simple example this works:



Also note, that's not JSFiddle, it's Sencha Fiddle

[Chaoz]

Hi Mitch!

Wooops, Sencha Fiddle... lol butterfingers... anywho... is there a way to instantiate and declare them outside the launch then add them during launch? or I have to code everything inside? ( non-mvc route ).

[mitchellsimoens]

You don't need to have everything within the launch method but they need to be instantiated after the launch method has been executed so that the framework is fully initialized.

[Chaoz]

Hi Mitch,

late reply, Sorry to be nosy, very new to Touch 2.4 and still getting the grasp of this. So what you mean is I instantiate framework,

Ext.application({
    name : 'Fiddle',

    launch : function() {
        
    }
}); 

then do this?

var panel = Ext.create('Ext.Panel', { 
            width: 200, 
            height: 200, 
            layout: 'fit',
            items: { 
                xtype: 'button', 
                text: 'test', 
                listeners: { 
                    tap: function() { 
                        alert("test"); 
                    } 
                } 
            } 
        });
        
        Ext.Viewport.add(panel);

?

thanks

[mitchellsimoens]

Where is the 2nd code snippet? Is it after the launch method has executed or just after it was defined?

[Chaoz]

Oh, sorry, was not clear.... should slook like ....

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
         
    } 
});  

var panel = Ext.create('Ext.Panel', { 
            width: 200, 
            height: 200, 
            layout: 'fit',
            items: { 
                xtype: 'button', 
                text: 'test', 
                listeners: { 
                    tap: function() { 
                        alert("test"); 
                    } 
                } 
            } 
        });
        
        Ext.Viewport.add(panel); 

[mitchellsimoens]

That's not have JavaScript works, the launch method isn't executed yet, it's just defined. Put that code within the launch method or somewhere after the launch method has executed.