1. #1
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    587
    Vote Rating
    32
    Answers
    35
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default Unanswered: Custom Component add items

    Unanswered: Custom Component add items


    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:

    Code:
    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?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Your code, newContainer is not a child of container so Ext.Viewport.down will not find it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    587
    Vote Rating
    32
    Answers
    35
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    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?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is what breaks it:

    Code:
    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:

    Code:
    this.add(newContainer);
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    587
    Vote Rating
    32
    Answers
    35
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    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:

    Code:
    template: [
        {
            reference: 'elementButton'
        },
        {
            reference: 'element',
            children: [
                {
                    reference: 'innerElement'
                    <have the newContainer being added here>
                }
        }
    ]
    Is that possible?
    Do I have to wrap it?

Thread Participants: 1

Tags for this Thread