Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    408
    Answers
    4
    Vote Rating
    17
    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);

  3. #2
    Sencha Premium Member
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    29
    Answers
    10
    Vote Rating
    7
    Johnny Major is on a distinguished road

      1  

    Default


    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);

  4. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    408
    Answers
    4
    Vote Rating
    17
    jweber will become famous soon enough

      0  

    Default


    Johnny,

    Thanks, that worked perfectly!

    I was able to define the button element in the component's "config" array, just like I would normally do with a container. Then in initialize, I just used this.getComponent to get a reference to it.

    Also, I changed "this.element.down" to "this.getInnerHtmlElement().down", so that it would only look in the html block for the render element.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar