How to add a container dynamically and working? Maybe a bug?

[rancid]

It's a simple question, i think, but I don't be able to add an object dynamicaly.
Here the simplified working code to add statically:

Ext.application({
    name: 'Test',
    launch: function() {
        var applicationPanel = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: {
                type: 'fit',
            },
            items: [{
                xtype: 'container',
                layout: {
                    type: 'hbox',
                    align: 'middle',
                },
                defaults: {
                    xtype: 'button',
                    flex: 1,
                    margin: 10,
                },
                items: [
                    {text: 'normal'},
                    {ui: 'round', text: 'round'},
                    {ui: 'small', text: 'small'},
                ],
            }],
        });
    }
});

This code works, but I need to load items dynamically, for example moving out in a create block:

var buttonsPanel = Ext.create('Ext.Panel',{
    layout: {
        type: 'hbox',
        align: 'middle',
    },
    defaults: {
        xtype: 'button',
        flex: 1,
        margin: 10,
    },
    items: [
        {text: 'normal'},
        {ui: 'round', text: 'round'},
        {ui: 'small', text: 'small'},
    ],
});
Ext.application({
    name: 'Test',
    launch: function() {
        var applicationPanel = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: {
                type: 'fit',
            },
        });
        applicationPanel.add([buttonsPanel]);
    }
});

... or in a define block:

Ext.define('Test.Panel', {
    extend: 'Ext.Panel',
    config: {
        layout: {
            type: 'hbox',
            align: 'middle',
        },
        defaults: {
            xtype: 'button',
            flex: 1,
            margin: 10,
        },
        items: [
            {text: 'normal'},
            {ui: 'round', text: 'round'},
            {ui: 'small', text: 'small'},
        ],
    }
});
var buttonsPanel = Ext.create('Test.Panel');
Ext.application({
    name: 'Test',
    launch: function() {
        var applicationPanel = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: {
                type: 'fit',
            },
        });
        applicationPanel.add([buttonsPanel]);
    }
});

Every these two ways seems to works, because they display the buttons, but incredibly the buttons don't works and they are uncliccable!?
It's seems a bug, but it't first time I try with Sencha Touch 2, so maybe I'm in wrong somewhere... where? Thanks all!

[mitchellsimoens]

Don't use Ext.create outside of Ext.application (or Ext.setup):

Ext.define('Test.Panel', {
    extend: 'Ext.Panel',
    config: {
        layout: {
            type: 'hbox',
            align: 'middle'
        },
        defaults: {
            xtype: 'button',
            flex: 1,
            margin: 10
        },
        items: [
            {text: 'normal'},
            {ui: 'round', text: 'round'},
            {ui: 'small', text: 'small'}
        ]
    }
});

Ext.application({
    name: 'Test',
    launch: function() {
        var applicationPanel = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: {
                type: 'fit'
            }
        });

        var buttonsPanel = Ext.create('Test.Panel');
        applicationPanel.add(buttonsPanel);
    }
});