How to set an Ext.Button into an Ext.Panel with specific html layout

[Frank345]

Hi,


I have an Ext.Panel that sets up its html property for a customer html layout.
How do I add an Ext.Button into this html, let's say into one specific div tag.
Example...

Ext.define('app.view.MyPanel', {
    extend: 'Ext.Panel',
    xtype: 'mypanel',
    alias: 'mypanel',
    config: {
        scrollable: true,
        html: 
            '<div> lot's of html here...'+
            '<div id="button">set button in here</div>'+
            '</div>'
    }
});

Thanks,
Frank

[mitchellsimoens]

You would have to use renderTo on the Ext.Button to render it into a specific element after the Ext.Panel has been rendered.

[Frank345]

Thanks. Is there a method this can ideally be placed to? Something like this:

Ext.define('app.view.MyPanel', {
    extend: 'Ext.Panel',
    xtype: 'mypanel',
    alias: 'mypanel',
    config: {
        scrollable: true,
        html: 
            '<div> lot's of html here...'+
            '<div id="button">set button in here</div>'+
            '</div>'
    },
    afterRenderOrSomethingSimilar: function() { // ?????
        this.callParent(arguments);
        new Ext.Button({
              renderTo: 'button',
              text: 'Click Me',
          });
    }
});

Thanks,
Frank

[mitchellsimoens]

That's the only way to accomplish what you want to do.

[Frank345]

Well, utilizing the panel's show event works fine -- although this code doesn't look too beautiful I have to admit.

Ext.define('app.view.MyPanel', {
    extend: 'Ext.Panel',
    xtype: 'mypanel',
    alias: 'mypanel',
    config: {
        scrollable: true,
        html: // usually defined in a separate template file
            '<div> lots of html here...'+
            '<div id="button">set button in here</div>'+
            '</div>'
    },
    buttonsDone: false,
    show: function () {
        this.callParent(arguments);
        if(this.buttonsDone) return;
        this.buttonsDone = true;
        new Ext.Button({
            renderTo:'button',
            text: 'Click Me'
        });
    }
});

Cheers,
Frank