1. #1
    Sencha User steffenbrem's Avatar
    Join Date
    Mar 2012
    Posts
    36
    Vote Rating
    2
    steffenbrem is on a distinguished road

      0  

    Default HELP: Render Component into HTML element (div etc.)

    Hello,

    How do I render an Ext Component (buttons etc.) into a normal HTML element? I've got an Ext.Container with a normal html table in it. I want to render an Ext.Button into the table. In Ext Js you can use the render() method, but I can't find any similar in Sencha Touch 2.

    Code:
    Ext.create('Ext.Container', {
        html: [
            '<table>',
                '<tr>',
                    '<td>some data...</td>',
                    '<td>' + Ext.create('Ext.Button', { text: 'Button' }) + '</td>',
                '</tr>',
            '</table>'
        ]
    });

    Thanks!

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,602
    Vote Rating
    1141
    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

    Try using the renderTo config
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    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 steffenbrem's Avatar
    Join Date
    Mar 2012
    Posts
    36
    Vote Rating
    2
    steffenbrem is on a distinguished road

      0  

    Default

    Can you do something like this then?

    Code:
    var div = document.createElement('div');
    
    Ext.create('Ext.Button', {
        text: 'Button',
        renderTo: div
    });

  4. #4
    Sencha User dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,091
    Vote Rating
    57
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      1  

    Default

    it would be renderTo: 'div' (with quotes) where 'div' is the id of the div

    so if you had

    Code:
    <div id="myContainer"></div>
    then you would code:

    Code:
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-renderTo
    
    
    
    var div = document.createElement('div');Ext.create('Ext.Button', {    text: 'Button',    renderTo: 'myContainer'});
    Lead Trainer / Sencha Specialist
    Community And Learning Systems

    Lead Architect
    DigitalTickets.net

  5. #5
    Sencha User steffenbrem's Avatar
    Join Date
    Mar 2012
    Posts
    36
    Vote Rating
    2
    steffenbrem is on a distinguished road

      0  

    Default

    Thanks dawesi! Maybe it's a good thing to update those things in the docs? So I would know that I could render it to an element ID etc.

    Well, it's working now, thanks guys

  6. #6
    Sencha User
    Join Date
    Feb 2015
    Posts
    6
    Vote Rating
    0
    albanirneves is on a distinguished road

      0  

    Default

    my Example
    Ext.define('MyApp.view.Header', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.mainheader',
    border: false,
    bodyBorder: false,
    bodyStyle: 'background-image:url(resources/images/someimage.png)',
    html: '<span id="btnOptions" style="float: right"></span>',
    items: [ {
    xtype : 'image',
    src : 'resources/images/logo.png',
    margin : '10 10 10 10',// (top, right, bottom, left)
    height: 45
    } ],
    listeners:{
    afterrender:function(){
    Ext.create('Ext.button.Split', {
    itemId: 'buttonOptions',
    scale : 'medium', t
    ext: 'Button',
    renderTo: Ext.getElementById('btn'),
    action: 'buttonOptions',
    margin : '10 10 10 10',// (top, right, bottom, left)
    padding: '7 5 7 5',// (top, right, bottom, left)
    menu: [ {
    text : 'Config',
    itemId : 'settings'
    }, {
    text: 'Logoff',
    itemId: 'menuLogoff'
    } ] }); } }});