Array de items y el atributo xtype

Algunos componentes incluyen la propiedad "items", la cual permite especificar el array de elementos que contiene. Por ejemplo, en un panel nos permitirá indicar los elementos que este contiene o en un grupo de botones los botones a agrupar.

Si los elementos han sido creados previamente podemos usar su nombre de variable para añadirlos de la forma:

items: [elemento]
items: [elemento1, elemento2]

Pero Sencha Touch también incluye la posibilidad de crear estos elementos en línea, lo cual será mucho más rápido y nos ahorrará código. Para ello tendremos que especificar directamente las opciones del objeto a crear entre llaves {}, de la forma:

items: [{...}, {...}]
// O si solo queremos crear un elemento:
items: {}

Al crear un elemento en línea, además de especificar el resto de sus propiedades, también tendremos que definir su tipo xtype (o tipo de objeto), de la forma:

items: { xtype: 'toolbar', docked: 'top' }

El atributo xtype facilita la creación de componentes y sin la necesidad de utilizar su nombre de clase completo. Es especialmente útil para crear componentes dentro de una clase contenedora. A continuación se muestra un ejemplo más completo de uso:

Ext.application({
    name : 'MiApp',
    launch : function() {
        Ext.create('Ext.Container', {
            fullscreen: true,
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    html: 'Este panel se ha creado mediante xtype'
                },
                {
                    xtype: 'toolbar',
                    title: 'Mi App',
                    docked: 'top'
                }
            ]
        });
}});

Listado de todos los xtypes disponibles

A continuación se incluye un listado de todos los xtypes disponibles en Sencha Touch:

Componentes generales:

xtype	Class
actionsheet	Ext.ActionSheet
audio	Ext.Audio
button	Ext.Button
component	Ext.Component
container	Ext.Container
image	Ext.Img
label	Ext.Label
loadmask	Ext.LoadMask
map	Ext.Map
mask	Ext.Mask
media	Ext.Media
panel	Ext.Panel
segmentedbutton	Ext.SegmentedButton
sheet	Ext.Sheet
spacer	Ext.Spacer
title	Ext.Title
titlebar	Ext.TitleBar
toolbar	Ext.Toolbar
video	Ext.Video
carousel	Ext.carousel.Carousel
carouselindicator	Ext.carousel.Indicator
navigationview	Ext.navigation.View
datepicker	Ext.picker.Date
picker	Ext.picker.Picker
pickerslot	Ext.picker.Slot
slider	Ext.slider.Slider
thumb	Ext.slider.Thumb
tabbar	Ext.tab.Bar
tabpanel	Ext.tab.Panel
tab	Ext.tab.Tab
viewport	Ext.viewport.Default

Componentes tipo DataView:

xtype	Class
dataview	Ext.dataview.DataView
list	Ext.dataview.List
listitemheader	Ext.dataview.ListItemHeader
nestedlist	Ext.dataview.NestedList
dataitem	Ext.dataview.component.DataItem

Componentes para formulario:

xtype	Class
checkboxfield	Ext.field.Checkbox
datepickerfield	Ext.field.DatePicker
emailfield	Ext.field.Email
field	Ext.field.Field
hiddenfield	Ext.field.Hidden
input	Ext.field.Input
numberfield	Ext.field.Number
passwordfield	Ext.field.Password
radiofield	Ext.field.Radio
searchfield	Ext.field.Search
selectfield	Ext.field.Select
sliderfield	Ext.field.Slider
spinnerfield	Ext.field.Spinner
textfield	Ext.field.Text
textareafield	Ext.field.TextArea
textareainput	Ext.field.TextAreaInput
togglefield	Ext.field.Toggle
urlfield	Ext.field.Url
fieldset	Ext.form.FieldSet
formpanel	Ext.form.Panel