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:
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:
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:
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:
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 |
Last updated