I want to take an ExtJS element(div) retrieved from the DOM selector, and convert that to an ExtJS Component(a panel). How can I go about doing this? Thanks.
+2
A:
You want to use the contentEl config. It places what is in the div into the panel.
<html>
<head>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
<script src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.1/ext-all-debug.js"></script>
<script>
Ext.BLANK_IMAGE_URL = 'ext-3.1.1/resources/images/default/s.gif';
Ext.onReady(function(){
var viewport = new Ext.Viewport({
items: [{
title: 'About Us',
width: 200,
height: 200,
contentEl: 'about_us'
}]
});
});
</script>
</head>
<body>
<div id="about_us">We are a great team to work with!</div>
</body>
</html>
Jonathan Julian
2010-04-08 04:29:37
That is EXACTLY what I needed. THANKS!
needhelp
2010-04-08 04:38:51
Just to be clear, this is simply using the element's innerHTML as a new panel's body content -- NOT "converting" the element into a Panel component. You actually can convert valid markup into a Panel component using the `applyToMarkup` method, which is different. FYI.
bmoeskau
2010-04-08 14:28:54
That is also good to know. Thanks!
needhelp
2010-04-09 04:07:51