Custom Component add items

[Kurt001]

Hi,

I am trying to add items to a custom component, but I cannot grab these items as a controller ref.

I would like to be able to get the items like:
Ext.Viewport.down('#myLaterAddedItem');

Here is how I add the items to the custom component:

Ext.define('Ext.mgd.DropDown', {
    extend: 'Ext.Component',
    xtype: 'buttondropdown',

    config: {
        itemsContainer: {
            cls: 'x-dropdown-container',
            items: []
        },

        items: []
        },

        getElementConfig: function () {
             return {
                 reference: 'element',
                 classList: ['x-unsized']
             }
        },

    applyItemsContainer: function (config) {
        return Ext.factory(config, Ext.Container, this.getItemsContainer());
    },

    updateItemsContainer: function (newContainer, oldContainer) {
        var me = this;
        if (newContainer) {
            newContainer.add(this.getItems());
            newContainer.renderTo(this.element);
            newContainer.setParent(me);
        }
        else if (oldContainer) {
            oldContainer.destroy();
        }
    },

    initialize: function () {
        this.callParent(arguments);
    }
});

What am I doing wrong?

[mitchellsimoens]

Your code, newContainer is not a child of container so Ext.Viewport.down will not find it.

[Kurt001]

How do I make it a child?
With 'applyItemsContainer' I made it a container itself.
With 'newContainer.add(this.getItems()); and 'newContainer.renderTo(this.element); I thought I made it a child. So what am I missing?

Do I have to extend Container instead of Component?

As I am using a template, can I still add the newContainer to the templat?

[mitchellsimoens]

This is what breaks it:

newContainer.renderTo(this.element);

newContainer is not added to a container, it is just rendered to it. Sencha Touch isn't a DOM lib, it's focused on a component structure.

Ext.mgd.DropDown extends Ext.Component so you would have to change it to extend Ext.Container and replace that renderTo call to be:

this.add(newContainer);

[Kurt001]

Still have an open end:
I am using a 'template' with a reference (e.g. innerElement) in there.

Now I would like to have the the newContainer being rendered to this.innerElement.

That way I get the structure:

template: [
    {
        reference: 'elementButton'
    },
    {
        reference: 'element',
        children: [
            {
                reference: 'innerElement'
                <have the newContainer being added here>
            }
    }
]

Is that possible?
Do I have to wrap it?