A DomHelper element spec, or true for a default element spec. Used to create the Element which will encapsulate this Component. See autoEl for details. Defaults to:
-{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}{tag: 'input', type: 'text', size: '20', autocomplete: 'off'}A tag name or DomHelper spec used to create the Element which will +encapsulate this Component.
+You do not normally need to specify this. For the base classes Ext.Component, Ext.BoxComponent, +and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex +DOM structure created by their own onRender methods.
+This is intended to allow the developer to create application-specific utility Components encapsulated by +different DOM elements. Example usage:
{
+ xtype: 'box',
+ autoEl: {
+ tag: 'img',
+ src: 'http://www.example.com/example.jpg'
+ }
+}, {
+ xtype: 'box',
+ autoEl: {
+ tag: 'blockquote',
+ html: 'autoEl is cool!'
+ }
+}, {
+ xtype: 'container',
+ autoEl: 'ul',
+ cls: 'ux-unordered-list',
+ items: {
+ xtype: 'box',
+ autoEl: 'li',
+ html: 'First list item'
+ }
+}True to use height:'auto', false to use fixed height (or allow it to be managed by its parent +Container's layout manager. Defaults to false.
+Note: Although many components inherit this config option, not all will +function as expected with a height of 'auto'. Setting autoHeight:true means that the +browser will manage height based on the element's contents, and that Ext will not manage it at all.
+If the browser is managing the height, be aware that resizes performed by the browser in response +to changes within the structure of the Component cannot be detected. Therefore changes to the height might +result in elements needing to be synchronized with the new height. Example:
var w = new Ext.Window({
+ title: 'Window',
+ width: 600,
+ autoHeight: true,
+ items: {
+ title: 'Collapse Me',
+ height: 400,
+ collapsible: true,
+ border: false,
+ listeners: {
+ beforecollapse: function() {
+ w.el.shadow.hide();
+ },
+ beforeexpand: function() {
+ w.el.shadow.hide();
+ },
+ collapse: function() {
+ w.syncShadow();
+ },
+ expand: function() {
+ w.syncShadow();
+ }
+ }
+ }
+}).show();true to use overflow:'auto' on the components layout element and show scroll bars automatically when
necessary, false to clip any overflowing content (defaults to false).True to use width:'auto', false to use fixed width (or allow it to be managed by its parent +Container's layout manager. Defaults to false.
+Note: Although many components inherit this config option, not all will +function as expected with a width of 'auto'. Setting autoWidth:true means that the +browser will manage width based on the element's contents, and that Ext will not manage it at all.
+If the browser is managing the width, be aware that resizes performed by the browser in response +to changes within the structure of the Component cannot be detected. Therefore changes to the width might +result in elements needing to be synchronized with the new width. For example, where the target element is:
<div id='grid-container' style='margin-left:25%;width:50%'></div>var myPanel = new Ext.Panel({
+ renderTo: 'grid-container',
+ monitorResize: true, // relay on browser resize
+ title: 'Panel',
+ height: 400,
+ autoWidth: true,
+ layout: 'hbox',
+ layoutConfig: {
+ align: 'stretch'
+ },
+ defaults: {
+ flex: 1
+ },
+ items: [{
+ title: 'Box 1',
+ }, {
+ title: 'Box 2'
+ }, {
+ title: 'Box 3'
+ }],
+});The maximum value in pixels which this BoxComponent will set its height to.
Warning: This will override any size management applied by layout managers.