Class Ext.Component

The sizing and positioning of the component Elements is the responsibility of the Component's layout manager which creates and manages the type of layout specific to the component.

If the layout configuration is not explicitly specified for a general purpose compopnent the default layout manager will be used.

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.

• Description :
  This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
• Notes :
  The specified HTML element is appended to the layout element of the component after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.
  The specified HTML element used will not participate in any layout scheme that the Component may use. It is just HTML. Layouts operate on child items.
  Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once.

DOM events from ExtJs Components

While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a a child element of a Component, we need to specify this explicitly:

new Ext.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

The maximum value in pixels which this Component will set its height to.

Warning: This will override any size management applied by layout managers.

The maximum value in pixels which this Component will set its width to.

Warning: This will override any size management applied by layout managers.

The minimum value in pixels which this Component will set its height to.

Warning: This will override any size management applied by layout managers.

The minimum value in pixels which this Component will set its width to.

Warning: This will override any size management applied by layout managers.

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

See render also.

An XTemplate 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.Component, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure.

This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements.

new Ext.Panel({
            title: 'Some Title',
            renderTo: Ext.getBody(),
            width: 400, height: 300,
            layout: 'form',
            items: [{
                xtype: 'textareafield',
                style: {
                    width: '95%',
                    marginBottom: '10px'
                }
            },
            new Ext.Button({
                text: 'Send',
                minWidth: '100',
                style: {
                    marginBottom: '10px'
                }
            })
            ]
        });

new Ext.Panel({
          title: 'Some Title',
          baseCls: 'x-component'
          ui: 'green'
      });

The ui configuration in this example would add 'x-component-green' as an additional class.