Using xtypes

2012 Adobe Systems Incorporated.

All rights reserved.
Page 1
Created on 2014-05-26
Using xtypes
Overview / CQ / Adobe Experience Manager 5.6.1 / Developing / Using and Extending Widgets /
This page describes all the xtypes that are available with Adobe Experience Manager (AEM).
In the ExtJS language, an xtype is a symbolic name given to a class. You can read the "Component XTypes"
paragraph of the Overview of ExtJS 2 for a detailed explanation about what an xtype is and how it can be
used.

For a complete information on all the available widgets in AEM refer to the widget API documentation.
To find out in which components a given xtype is used in AEM, you can use the following Xpath query in
CRXDE by replacing 'checkbox' with the xtype that you are interested in:
//element(*, cq:Widget)[@xtype='checkbox']

Xtype Articles The following table lists community articles that guides you through how to build AEM
components using various xtypes.
Article Name Description
Creating your first Adobe Experience Manager
custom xtype
Discusses how to create a basic custom AEM
component that uses a multi-field and a custom
xtype by using the AEM widget API.
See: Creating your first Adobe Experience
Manager custom xtype.

Create a CQ widget that supports image drag and
drop
Discusses how to develop a basic CQ component
that supports a dialog box with multiple tabs,
supports an image, and hooks into the functionality
offered by the Content Finder.
See: Create a CQ widget that supports image drag
and drop.
Creating AEM multifield components that support
drag and drop and uses custom xtypes
Discusses how to create a more advanced Adobe
Experience Manager multi-field component that
supports a rich text editor and lets an AEM author
drag images from the Content Finder and drop
them into the component.
See: Creating AEM multifield components that
support drag and drop and uses custom xtypes.

Creating a custom CQ component that uses a
dialog grid
Discusses how to develop a CQ component that
uses a data grid based on a CQ.Ext.grid.GridPanel.
Also discusses how to populate the grid by using
a CQ.Ext.data.Store instance.
See: Creating a custom CQ component that uses a
dialog grid.
Creating a custom CQ component that uses an
editable dialog grid
Discusses how to develop a CQ component
that uses an editable data grid based on a
CQ.Ext.grid.EditorGridPanel. An editable grid lets
AEM authors modify data located in the grid's
cells.
See: Creating a custom CQ component that uses
an editable dialog grid.
Invoking Sling Servlets from AEM xtype widgets Discusses how to develop a CQ component
that uses a TreePanel object based on a
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 2
Created on 2014-05-26
CQ.Ext.tree.TreePanel. A TreePanel lets AEM
authors view tree stuctured data. In addition, also
discusses how to populate the TreePanel with JCR
data by using a Sling Servlet.
See: Invoking Sling Servlets from AEM xtype
widgets.
XTYPES
Please find below a list of the available xtypes in Adobe Experience Manager:
annotation CQ.wcm.Annotation
The Dialog is a special kind of window with a form in the body and a button group in the footer. It is typically
used to edit content, but can also just display information.
arraystore CQ.Ext.data.ArrayStore
Formerly known as "SimpleStore".
Small helper class to make creating CQ.Ext.data.Stores from Array data easier. An ArrayStore will be
automatically configured with a CQ.Ext.data.ArrayReader.
asseteditor CQ.dam.AssetEditor
The Asset Editor used in DAM Admin.
assetreferencesearchdialog CQ.wcm.AssetReferenceSearchDialog
The AssetReferenceSearchDialog is a dialog that pops up in case a page references assets or tags.
blueprintconfig CQ.wcm.msm.BlueprintConfig
The BlueprintConfig provides a panel to view the Live Copies of a Blueprint and edit this Blueprint properties
( sync trigger and sync actions ).
blueprintstatus CQ.wcm.msm.BlueprintStatus
The BlueprintStatus provides a panel to view and edit a Blueprint and its Live Copies relationships. Browsing
is done through a CQ.wcm.msm.BlueprintStatus.Tree, edition through a CQ.wcm.msm.BlueprintConfig and a
a CQ.wcm.msm.LiveCopyProperties.
box CQ.Ext.BoxComponent
The BlueprintConfig provides a panel to view the Live Copies of a Blueprint and edit this Blueprint properties
( sync trigger and sync actions ).
browsedialog CQ.BrowseDialog
The BrowseDialog lets the user browse the repository in order to select a path. It is typically used through a
BrowseField.
browsefield CQ.form.BrowseField
Deprecated: Use CQ.form.PathField instead
bulkeditor CQ.wcm.BulkEditor
The BulkEditor provides a search engine and a grid to edit search results.
The BulkEditor must be inserted in a HTML form (required by import functionality). This works perfectly with
a CQ.Dialog.
bulkeditorform CQ.wcm.BulkEditorForm
The BulkEditorForm provides CQ.wcm.BulkEditor surrounded by a HTML form. This is the standalone
version of the CQ.wcm.BulkEditor, HTML form is required for import button.
button CQ.Ext.Button
Simple Button class
buttongroup CQ.Ext.ButtonGroup
Container for a group of buttons.
chart CQ.Ext.chart.Chart
The CQ.Ext.chart package provides the capability to visualize data with flash based charting. Each chart
binds directly to an CQ.Ext.data.Store enabling automatic updates of the chart. To change the look and feel
of a chart, see the chartStyle and extraStyle config options.
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 3
Created on 2014-05-26
checkbox CQ.Ext.form.Checkbox
Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
checkboxgroup CQ.Ext.form.CheckboxGroup
A grouping container for CQ.Ext.form.Checkbox controls.
clearcombo CQ.form.ClearableComboBox
The ClearableComboBox is a non-editable combo box with a trigger to clear its value.

colorfield CQ.form.ColorField
The ColorField lets the user enter a color hex value either directly or using a CQ.Ext.ColorMenu.

colorlist CQ.form.ColorList
The ColorList lets the user choose a color from an editable list.
colormenu CQ.Ext.menu.ColorMenu
A menu containing a CQ.Ext.ColorPalette component.
colorpalette CQ.Ext.ColorPalette
Simple color palette class for choosing colors. The palette can be rendered to any container.
columnmodel CQ.Ext.grid.ColumnModel
ColumnModel is used to configure how and what parts of that data will be displayed in the vertical slices
(columns) of the grid.
For information about using a ColumnModel xtype, see Creating a custom CQ component that uses an
editable dialog grid.
combo CQ.Ext.form.ComboBox
A combobox control with support for autocomplete, remote-loading, paging and many other features.
A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is that to submit
the valueField, you must specify a hiddenName to create a hidden input
component CQ.Ext.Component
Base class for all Ext components. All subclasses of Component may participate in the automated Ext
component lifecycle of creation, rendering and destruction which is provided by the Container class.
Components may be added to a Container through the items config option at the time the Container is
created
componentextractor CQ.wcm.ComponentExtractor
The ComponentExtractor lets the user extract components from a website/page.

componentselector CQ.form.ComponentSelector
A grouped, ordered selection of available Components

componentstyles CQ.form.ComponentStyles
compositefield CQ.form.CompositeField
Base class for panel based, complex form fields which include one form field or a group of form fields. The
following illustration shows a group of form fields based on this xtype.
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 4
Created on 2014-05-26
You can use this xtype to create a custom xtype. For information about using a CQ.form.CompositeField
to create a custom xtype, see Creating AEM multifield components that support drag and drop and uses
custom xtypes.
container CQ.Ext.Container
Base class for any CQ.Ext.BoxComponent that may contain other Components. Containers handle the basic
behavior of containing items, namely adding, inserting and removing items.
The most commonly used Container classes are CQ.Ext.Panel, CQ.Ext.Window and CQ.Ext.TabPanel.
contentfinder CQ.wcm.ContentFinder
The ContentFinder is a specialized two column Viewport which contains the actual Content Finder on the left
and the Content Frame on the right. It allows interaction between the search results of the Content Finder
contentfindertab CQ.wcm.ContentFinderTab
ContentFinderTab is a specialized panel providing features used in the tab panels of the
CQ.wcm.ContentFinder. Typically it is featuring a search form - the Query Box - and a data view to display
the search
cq.workflow.model.combo CQ.wcm.WorkflowModelCombo
The WorkflowModelCombo is a customized CQ.Ext.form.ComboBox that shows a list of available workflow
models.

cq.workflow.model.selector CQ.wcm.WorkflowModelSelector
The WorkflowModelSelector combines a WorkflowModelCombo with a thumbnail image of the workflow, and
buttons to create and edit workflow models.

createsitewizard CQ.wcm.CreateSiteWizard
The CreateSiteWizard is a step-by-step wizard to create (MSM) sites.

createversiondialog CQ.wcm.CreateVersionDialog
The CreateVersionDialog is a dialog that allows creating a new version of a page.

customcontentpanel CQ.CustomContentPanel
The CustomContentPanel is a special kind of panel for use in CQ.Dialog: Its contents are retrieved from and
submitted to a different URL than the other fields in the dialog.
cycle CQ.Ext.CycleButton
A specialized SplitButton that contains a menu of CQ.Ext.menu.CheckItem elements. The button
automatically cycles through each menu item on click, raising the button's change event (or calling the
button's changeHandler function, if supplied) for the active menu item.
dataview CQ.Ext.DataView
A mechanism for displaying data using custom layout templates and formatting. DataView uses an
CQ.Ext.XTemplate as its internal templating mechanism, and is bound to an CQ.Ext.data.Store so that as
the data in the store changes the view is automatically updated to reflect the changes.
datefield CQ.Ext.form.DateField
Provides a date input field with a CQ.Ext.DatePicker dropdown and automatic date validation.
datemenu CQ.Ext.menu.DateMenu
A menu containing an CQ.Ext.DatePicker Component.
datepicker CQ.Ext.DatePicker
A popup date picker. This class is used by the DateField class to allow browsing and selection of valid
dates.
datetime CQ.form.DateTime
The DateTime lets the user enter a date and a time by combining CQ.Ext.form.DateField and
CQ.Ext.form.TimeField.
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 5
Created on 2014-05-26
dialog CQ.Dialog
The Dialog is a special kind of window with a form in the body and a button group in the footer. It is typically
used to edit content, but can also just display information. The following illustration shows an AEM dialog.
For information about creating a dialog as part of creating an AEM component, see Creating AEM multifield
components that support drag and drop and uses custom xtypes.
dialogfieldset CQ.form.DialogFieldSet
The DialogFieldSet is a FieldSet for use in Dialogs.
directstore CQ.Ext.data.DirectStore
Small helper class to create an CQ.Ext.data.Store configured with an CQ.Ext.data.DirectProxy and
CQ.Ext.data.JsonReader to make interacting with an CQ.Ext.Direct Server-side Provider easier.
displayfield CQ.Ext.form.DisplayField
A display-only text field which is not validated and not submitted.
editbar CQ.wcm.EditBar
The EditBar lets the user edit content using buttons on a bar.
Although not listed here, EditBar has all the members of CQ.wcm.EditBase.
editor CQ.Ext.Editor
A base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling
logic.
editorgrid CQ.Ext.grid.EditorGridPanel
This class extends the GridPanel Class to provide cell editing on selected columns. The editable columns
are specified by providing an editor in the column configuration.
The following illustration shows a CQ.Ext.grid.EditorGridPanel instance.

For information about creating an AEM component that uses a CQ.Ext.grid.EditorGridPanel, see Creating a
custom CQ component that uses an editable dialog grid.
editrollover CQ.wcm.EditRollover
The EditRollover lets the user edit content through double-click and provides more editing actions through a
context menu. The editable area is indicated with a frame when the mouse is rolling over the content.
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 6
Created on 2014-05-26
feedimporter CQ.wcm.FeedImporter
The FeedImporter lets the user import RSS or Atom feeds and create pages for each feed entry.
field CQ.Ext.form.Field
Base class for form fields that provides default event handling, sizing, value handling and other functionality.
fieldset CQ.Ext.form.FieldSet
Standard container used for grouping items within a form.
fileuploaddialogbutton CQ.form.FileUploadDialogButton
The FileUploadDialogButton creates a button that opens a new dialog for uploading a file via the
FileUploadField. Can be used inside edit dialogs where the upload must happen in a separate form
fileuploadfield CQ.form.FileUploadField
The FileUploadField lets the user select a single file to be uploaded.
findreplacedialog CQ.wcm.FindReplaceDialog
The FindReplaceDialog is a dialog for finding and replacing tokens in a page and its child pages.
flash CQ.Ext.FlashComponent
grid CQ.Ext.grid.GridPanel
This class represents the primary interface of a component based grid control to represent data in a tabular
format of rows and columns.
The following illustration shows a CQ.Ext.grid.GridPanel instance.
For information about creating a custom AEM component that uses this xtype, see Creating a custom CQ
component that uses a dialog grid.
groupingstore CQ.Ext.data.GroupingStore
A specialized store implementation that provides for grouping records by one of the available fields. This
is usually used in conjunction with an CQ.Ext.grid.GroupingView to prove the data model for a grouped
GridPanel.
For information about using a GroupingStore xtype, see Creating a custom CQ component that uses an
editable dialog grid.
heavymovedialog CQ.wcm.HeavyMoveDialog
The HeavyMoveDialog is a dialog for moving a page and its child pages, also considering reactivation of
previously activated pages ('heavy' move).
hidden CQ.Ext.form.Hidden
A basic hidden field for storing hidden values in forms that need to be passed in the form submit.
historybutton CQ.HistoryButton
The HistoryButton is a small helper class to easily provide back and forward buttons. Usually two related
instances are required: The forward button instance is a simple button linked to the back button instance
which handles the history
htmleditor CQ.Ext.form.HtmlEditor
Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will
be automatically hidden when needed. These are noted in the config options where appropriate.

The editor's toolbar buttons have tooltips defined in the buttonTips property.
iframedialog CQ.IframeDialog
A plain dialog showing the contents of an iframe and allowing for forms in iframes.
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 7
Created on 2014-05-26
inlinetextfield CQ.form.InlineTextField
The InlineField is a text field which is displayed as a label when not in focus.
jsonreader CQ.Ext.data.DataReader
Data reader class to create an Array of CQ.Ext.data.Record objects.
For information about working with a JsonReader xtype, see Creating a custom CQ component that uses an
editable dialog grid.
jsonstore CQ.Ext.data.JsonStore
Small helper class to make creating CQ.Ext.data.Stores from JSON data easier. A JsonStore will be
automatically configured with a CQ.Ext.data.JsonReader.
label CQ.Ext.form.Label
Basic Label field.
languagecopydialog CQ.wcm.LanguageCopyDialog
The LanguageCopyDialog is a dialog for copying language trees.
linkchecker CQ.wcm.LinkChecker
The LinkChecker is a tool to check external links in a site.
listview CQ.Ext.list.ListView
CQ.Ext.list.ListView is a fast and light-weight implementation of a Grid like view with the following
characteristics:
livecopyproperties CQ.wcm.msm.LiveCopyProperties
The LiveCopyProperties provides a panel to view and edit Live Copy properties ( relationship inheritance,
sync trigger and sync actions )
lvbooleancolumn CQ.Ext.list.BooleanColumn

A Column definition class which renders boolean data fields. See the xtype config option of
CQ.Ext.list.Column for more details.
lvcolumn CQ.Ext.list.Column
This class encapsulates column configuration data to be used in the initialization of a ListView.
lvdatecolumn CQ.Ext.list.DateColumn
A Column definition class which renders a passed date according to the default locale, or a configured
format. See the xtype config option of CQ.Ext.list.Column for more details.
mediabrowsedialog CQ.MediaBrowseDialog
Deprecated: Use Content Finder to browse media instead.

The MediaBrowseDialog is a dialog for browsing the media library.
menu CQ.Ext.menu.Menu
A menu object. This is the container to which you may add menu items. Menu can also serve as a base
class when you want a specialized menu based off of another component (like CQ.Ext.menu.DateMenu for
example).
Menus may contain either menu items, or general Components.
menubaseitem CQ.Ext.menu.BaseItem
The base class for all items that render into menus. BaseItem provides default rendering, activated state
management and base configuration options shared by all menu components.

menucheckitem CQ.Ext.menu.CheckItem
Adds a menu item that contains a checkbox by default, but can also be part of a radio group.
menuitem CQ.Ext.menu.Item
A base class for all menu items that require menu-related functionality (like sub-menus) and are not static
display items. Item extends the base functionality of CQ.Ext.menu.BaseItem by adding menu-specific
activation and click handling.
menuseparator CQ.Ext.menu.Separator
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 8
Created on 2014-05-26
Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will add one of
these by using "-" in you call to add() or in your items config rather than creating one directly.
menutextitem CQ.Ext.menu.TextItem
Adds a static text string to a menu, usually used as either a heading or group separator.
metadata CQ.dam.form.Metadata
Metadata provides a set of fields to determine the information required for a metadata field as used e.g. on
asset editor pages.
multifield CQ.form.MultiField
The MultiField is an editable list of form fields for editing multi-value properties. A multifield lets a
user dynamically add additional fields to a dialog. The following illustration shows a dialog with a
CQ.form.MultiField with two controls: a drop-down and text field.
When an end user clicks Add Item, additional fields appear on the dialog. For information about creating an
AEM component that uses a multi-field xtype, see: Creating your first Adobe Experience Manager custom
xtype.


mvt CQ.form.MVT
The Multivariate testing component can be used to define and edit a set of images that are presented as
alternating banners. Click through rate statistics are gathered per banner.
notificationinbox CQ.wcm.NotificationInbox
The NotificationInbox allows the user to subscribe to WCM actions and manage notifications.
numberfield CQ.Ext.form.NumberField
Numeric text field that provides automatic keystroke filtering and numeric validation.
offlineimporter CQ.wcm.OfflineImporter
The OfflineImporter is a tool to import and convert Microsoft Word documents to AEM pages. This feature
allows content to be edited offline using a word processor. Note that the new XML-based .docx.
ownerdraw CQ.form.OwnerDraw
The OwnerDraw can contain custom HTML code (either entered directly or retrieved from a URL).
paging CQ.Ext.PagingToolbar
As the amount of records increases, the time required for the browser to render them increases. Paging is
used to reduce the amount of data exchanged with the client. Note: if there are more records/rows than can
be viewed in the available screen area, vertical
panel CQ.Ext.Panel
Panel is a container that has specific functionality and structural components that make it the perfect building
block for application-oriented user interfaces.
Panels are, by virtue of their inheritance from CQ.Ext.Container.
paragraphreference CQ.form.ParagraphReference
The paragraph refrence field allows to browse pages and select one of their paragraphs. It consists of a
trigger field and a associated paragraph browse dialog.
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 9
Created on 2014-05-26
password CQ.form.Password
The Password is like a CQ.Ext.form.TextField but keeps its value private, allowing users to enter sensitive
data.
pathcompletion CQ.form.PathCompletion
Deprecated: Use CQ.form.PathField instead
pathfield CQ.form.PathField
The PathField is an input field designed for paths with path completion and a button to open a
CQ.BrowseDialog for browsing the server repository. It can also browse page paragraphs for advanced link
generation.
progress CQ.Ext.ProgressBar
An updateable progress bar component. The progress bar supports two different modes: manual and
automatic.
In manual mode, you are responsible for showing, updating (via updateProgress) and clearing the progress
bar as needed from your own code. This method is most appropriate when you want to show progress
propertygrid CQ.Ext.grid.PropertyGrid
A specialized grid implementation intended to mimic the traditional property grid as typically seen in
development IDEs. Each row in the grid represents a property of some object, and the data is stored as a set
of name/value pairs in CQ.Ext.grid.PropertyRecords.
propgrid CQ.PropertyGrid
The PropertyGrid is a generic grid used for displaying and editing properties of objects.
quicktip CQ.Ext.QuickTip
@xtype quicktip A specialized tooltip class for tooltips that can be specified in markup and automatically
managed by the global CQ.Ext.QuickTips instance. See the QuickTips class header for additional usage
details and examples.
radio CQ.Ext.form.Radio
Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type.
Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
radiogroup CQ.Ext.form.RadioGroup
A grouping container for CQ.Ext.form.Radio controls.

referencesdialog CQ.wcm.ReferencesDialog
The ReferencesDialog is a dialog for displaying references on a page.
restoretreedialog CQ.wcm.RestoreTreeDialog
The RestoreTreeDialog is a dialog for restoring a previous version of a tree.
restoreversiondialog CQ.wcm.RestoreVersionDialog
The RestoreVersionDialog is a dialog for restoring a previous version of a page.
richtext CQ.form.RichText
The RichText provides a form field for editing styled text information (rich text). The following illustration
shows an instance of CQ.form.RichText.
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 10
Created on 2014-05-26
A Rich Text Editor lets a user enter and format text in the dialog. For information about creating an AEM
component that uses a Rich Text Editor, see
Creating AEM multifield components that support drag and drop and uses custom xtypes.

rolloutplan CQ.wcm.msm.RolloutPlan
The RolloutPlan provides a dialog to watch a page rollout progress. RolloutPlan is started by a
CQ.wcm.msm.RolloutWizard.
rolloutwizard CQ.wcm.msm.RolloutWizard
The RolloutWizard provides a wizard for rolling out a page. RolloutWizard starts a
CQ.wcm.msm.RolloutPlan.
searchfield CQ.form.SearchField
The SearchField provides a search field that provides the results in a drop down list which can be used for
searching the repository.
selection CQ.form.Selection
The Selection lets the user choose between several options. The options can be part of the configuration or
loaded from a JSON reponse. The Selection can either be rendered as dropdown (select), combobox (select
plus free text entry).
The following illustration shows a CQ.form.Selection instance with four options from which a user can
choose.

For information about creating an AEM component that uses this xtype, see Creating AEM multifield
components that support drag and drop and uses custom xtypes.
sidekick CQ.wcm.Sidekick
The Sidekick is a floating helper providing the user with common tools for page editing.
siteadmin CQ.wcm.SiteAdmin
The SiteAdmin is a console providing WCM administration functions.
siteimporter CQ.wcm.SiteImporter
The SiteImporter lets the user import complete websites and create initial projects.
sizefield CQ.form.SizeField
The SizeField lets the user enter the width and height (for example for an image). The following illustration
shows a CQ dialog that contains a CQ.form.SizeField.
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 11
Created on 2014-05-26
For infromation about creating a custom AEM component that uses a SizeField, see Creating a custom CQ
component that uses a dialog grid.

slider CQ.Ext.Slider
Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis
clicking and animation. Can be added as an item to any container.
slideshow CQ.form.Slideshow
The Slideshow provides a component that can be used to define and edit a set of images and image titles
that may be viewed as a slideshow.
The Slideshow component is based upon the CQ.form.SmartImage component.
smartfile CQ.form.SmartFile

The SmartFile is an intelligent file uploader.
If a Flash plugin (version >= 9) is installed, uploads are executed using the SWFupload library that provides
a convenient way to handle uploads.
smartimage CQ.form.SmartImage

The SmartImage is an intelligent image uploader. It provides tools to process an uploaded image, for
example a tool to define image maps and an image cropper.
Note that the component is mainly designed for use on a separate dialog tab. The following illustration shows
a dialog that uses this xtype.

For information about creating an AEM component that uses a CQ.form.SmartImage xtype, see Creating
AEM multifield components that support drag and drop and uses custom xtypes.
spacer CQ.Ext.Spacer
Used to provide a sizable space in a layout.
spinner CQ.form.Spinner
The Spinner is a trigger field for numeric, date or time values. The value can be increased and decreased by
using the provided up and down triggers, the scroll wheel or keys.
splitbutton CQ.Ext.SplitButton
A split button that provides a built-in dropdown arrow that can fire an event separately from the default click
event of the button. Typically this would be used to display a dropdown menu that provides additional options
to the primary button action, but any custom handler can provide the arrowclick implementation.
static CQ.Static
The Static can be used to display arbitrary text or HTML.
statistics CQ.wcm.Statistics
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 12
Created on 2014-05-26
The Statistics displays the page impressions as a chart. The widget allows to select a period, the statistics
should be displayed for.
store CQ.Ext.data.Store

The Store class encapsulates a client side cache of Record objects which provide input data for Components
such as the GridPanel, the ComboBox, or the DataView.
The following illustration shows a grid that is populated with data from an instance of this xtype.
For information about populating a grid using a CQ.Ext.data.Store instance, see Creating a custom CQ
component that uses a dialog grid.
suggestfield CQ.form.SuggestField
The SuggestField provides the user with suggestions based on his entry.
switcher CQ.Switcher
The Switcher provides a button group for the header bar in a console to switch between Websites, Digital
Assets, Tools, Workflow, and Security.
tableedit CQ.form.TableEdit
Deprecated: Use CQ.form.TableEdit2 instead.
tableedit2 CQ.form.TableEdit2
The TableEdit2 provides a widget for creating tables.
Added in CQ 5.3.
tabpanel CQ.Ext.TabPanel
A basic tab container. TabPanels can be used exactly like a standard CQ.Ext.Panel for layout purposes, but
also have special support for containing child Components (items).
The following illustration shows a dialog that uses a tabpanel that contains seven tabs.
For information about creating an AEM component that has a dialog that uses a tabpanel, see Creating AEM
multifield components that support drag and drop and uses custom xtypes.

TagInputField CQ.tagging.TagInputField
CQ.tagging.TagInputField is a form widget for entering tags. It has a popup menu for selecting from existing
tags, includes auto-completion and many other features.
textarea CQ.Ext.form.TextArea
Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds support for
auto-sizing.
textbutton CQ.TextButton
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 13
Created on 2014-05-26
The TextButton provides a text link with the capabilities of a CQ.Ext.Button.
textfield CQ.Ext.form.TextField
Basic text field. Can be used as a direct replacement for traditional text inputs, or as the base class for more
sophisticated input controls (like CQ.Ext.form.TextArea and CQ.Ext.form.ComboBox).
The following illustration shows an instance of CQ.Ext.form.TextField.
For information about using this xtype in a custom xtype, see Creating AEM multifield components that
support drag and drop and uses custom xtypes.
thumbnail CQ.form.Thumbnail
timefield CQ.Ext.form.TimeField
Provides a time input field with a time dropdown and automatic time validation.
Tip CQ.Ext.Tip
@xtype tip This is the base class for CQ.Ext.QuickTip and CQ.Ext.Tooltip that provides the basic layout and
positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
titleseparator CQ.menu.TitleSeparator
Adds a separator bar to a menu, used to divide logical groups of menu items. The separator can additionally
carry a title.
toolbar CQ.Ext.Toolbar
Basic Toolbar class. Although the defaultType for Toolbar is button, Toolbar elements (child items for the
Toolbar container) may be virtually any type of Component. Toolbar elements can be created explicitly via
their constructors,
tooltip CQ.Ext.ToolTip
A standard tooltip implementation for providing additional information when hovering over a target element.
treegrid CQ.tree.TreeGrid
@xtype treegrid
TreePanel CQ.Ext.tree.TreePanel
Displays tree-structured data, such as the content of the AEM JCR.
The following illustration shows a TreePanel.
For information about using this xtype in an AEM component, see Invoking Sling Servlets from AEM xtype
widgets.
trigger CQ.Ext.form.TriggerField
Using xtypes
2012 Adobe Systems Incorporated.
All rights reserved.
Page 14
Created on 2014-05-26
Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox
by default). The trigger has no default action, so you must assign a function to implement the trigger click
handler by overriding onTriggerClick. You can create a TriggerField directly, as it renders exactly like a
combobox .
uploaddialog CQ.UploadDialog
The UploadDialog lets the user upload files to the repository Creates a new UploadDialog.
userinfo CQ.UserInfo
Toolbar item to display the current user name and allow user actions like editing user properties and
impersonation.
viewport CQ.Ext.Viewport
A specialized container representing the viewable application area (the browser viewport).
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser
viewport and manages window resizing. There may only be one Viewport created
window CQ.Ext.Window

A specialized panel intended for use as an application window. Windows are floated, resizable, and
draggable by default. Windows can be maximized to fill the viewport, restored to their prior size, and can be
minimize.
For information about creating an AEM component that uses this xtype, see Creating a custom CQ
component that uses a dialog grid.
xmlstore CQ.Ext.data.XmlStore

Small helper class to make creating CQ.Ext.data.Stores from XML data easier. A XmlStore will be
automatically configured with a CQ.Ext.data.XmlReader.
cqinclude Pseudo xtype that includes widget definitions from a different path in the repository. It is most
commonly used in page dialogs. There is no actual JavaScript widget class for this xtype. It is processed by
the formatData() function of the CQ.Util class. For more information, see this knowledge base article.