PDA

View Full Version : Beginner Question: convert existing HTML Elements to Component



eztam
26 Jan 2010, 8:14 AM
Hi,

how can I convert/replace an existing HTML Element to Component?
If I render my components by

component.render('element')
the component will append in the element, but I want the element to be the component.

For example I want to do sth like this:


<div id="toolbar">Toolbar Content</div>

<script type="text/javascript">
var cmp = new Ext.Toolbar({replace:'toolbar'});
</script>

Are the any similar possibilities?


Thnx, Matthias!

Condor
26 Jan 2010, 8:23 AM
You are looking for the 'applyTo' config option and the applyToMarkup() method.

ps. If the component is part of a container then you should use 'el' instead of 'applyTo'.

eztam
26 Jan 2010, 8:48 AM
You are looking for the 'applyTo' config option and the applyToMarkup() method.

ps. If the component is part of a container then you should use 'el' instead of 'applyTo'.
Thank you very much.

I'll try it...

eztam
26 Jan 2010, 9:29 AM
I've got another short question concerning applyTo():

Can I realize sth like this:


<div id="sample-grid-store" style="display:none;">{ /* a JSON object with data for grid */ }</div>
<div id="sample-grid"></div>

<script type="text/javascript">
// JavaScript code to render sample-grid with sample-grid-store data
</script>

Condor
26 Jan 2010, 1:15 PM
Yes, but why would you want to? Can't you put the JSON object inside a <script> tag?

eztam
27 Jan 2010, 12:08 AM
Yes, but why would you want to? Can't you put the JSON object inside a <script> tag?
Should be possible.
But in the past I had a few Problems with <script> tags in the HTML Body and IE, but I can't remember exactly.

Condor
27 Jan 2010, 1:25 AM
I would recommend using a <script> tag, but if you can't you can use:


var data = Ext.decode(Ext.getDom('sample-grid-store').innerHTML);