Menu
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.
275
Advertisements. ExtJS UI is made up of one or many widgets called Components. Ext Js has various UI components defined that can be customized as per your requirements.
xtype is an easy way to create Components without using the full class name. This is especially useful when creating a Ext. Container that contains child Components. An xtype is simply a shorthand way of specifying a Component - for example you can use xtype: 'panel' instead of typing out Ext.
autoEl. To change the element name of the outer el we can use the autoEl config option: new Ext.Component({ autoEl: 'form', }); It looks just the same as before but the markup has changed: <form id="..." class="green-box x-component x-component-default" ...></form>
Answer: An Ext. element encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences, whereas an Ext. component is the base class for all objects in Ext, such as controls, panels and stores.
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>
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
