PDA

View Full Version : HELP: Render Component into HTML element (div etc.)



steffenbrem
30 Jul 2012, 4:15 AM
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.



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



Thanks!

mitchellsimoens
1 Aug 2012, 6:21 AM
Try using the renderTo config

steffenbrem
1 Aug 2012, 8:48 AM
Can you do something like this then?



var div = document.createElement('div');

Ext.create('Ext.Button', {
text: 'Button',
renderTo: div
});

dawesi
1 Aug 2012, 7:11 PM
it would be renderTo: 'div' (with quotes) where 'div' is the id of the div

so if you had


<div id="myContainer"></div>

then you would code:




http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-renderTo
(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'});

steffenbrem
1 Aug 2012, 10:48 PM
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 :)

albanirneves
19 Feb 2015, 8:33 AM
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'
} ] }); } }});