Threaded View

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    416
    Vote Rating
    18
    Answers
    5
    jweber will become famous soon enough

      0  

    Default Answered: Adding child item with renderTo

    Answered: Adding child item with renderTo


    I have a component which defines some HTML. I'd like to render an Ext.Button inside one of the HTML elements, and have it treated as a child of the component. Is this possible?

    I'm doing something like this:
    Code:
    Ext.define('MyComponent', {
    	extend: 'Ext.Container',
    	xtype: 'myComponent',
    	config: {
    		html: '<div class="renderEl"></div>'
    	},
    	initialize: function() {
    		this.callParent(arguments);
    		var renderEl = this.element.down('.renderEl');
    		this.add({
    			xtype: 'button',
    			renderTo: renderEl
    			text: 'Sample'
    		});
    	}
    });
    The button is added as a child component, but it's rendered outside of the HTML element.

    If I use Ext.create instead of this.add, it renders it inside the right element, but it's not treated as a child component. As a result, I can't find the button in a component query like "myComponent button".

  2. jweber,

    You could append the button to your element.

    Code:
            var renderEl = this.element.down('.renderEl'),
                button = this.add({
                    xtype: 'button',
                    text: 'Sample'
                });
    
    
            renderEl.appendChild(button.element);

Thread Participants: 1

Tags for this Thread