1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    25
    Answers
    1
    Vote Rating
    1
    Frank345 is on a distinguished road

      0  

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

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


    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...


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

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,071
    Answers
    3499
    Vote Rating
    852
    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


    You would have to use renderTo on the Ext.Button to render it into a specific element after the Ext.Panel has been rendered.
    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.

  4. #3
    Sencha User
    Join Date
    Aug 2010
    Posts
    25
    Answers
    1
    Vote Rating
    1
    Frank345 is on a distinguished road

      0  

    Default


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

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

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,071
    Answers
    3499
    Vote Rating
    852
    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


    That's the only way to accomplish what you want to do.
    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.

  6. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    25
    Answers
    1
    Vote Rating
    1
    Frank345 is on a distinguished road

      0  

    Default


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

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

Thread Participants: 1