HTML and CSS Reference
In-Depth Information
Bevor Sie die eigentlichen Elemente Ihrer App einfügen, definieren Sie das generelle
Layout. Wie im ersten Beispiel sorgt
fullscreen: true
dafür, dass Ihre App den kom-
pletten Bildschirm des Geräts einnimmt. Sollten Sie diese Eigenschaft vergessen,
kann es unter Umständen passieren, dass gar nichts anzeigt wird. Daher sollten Sie
dem umschließenden Container immer die Fullscreen-Option hinzufügen. Im Para-
meter
layout
legen Sie den Layoutmodus fest.
vbox
bedeutet, dass alle Elemente ver-
tikal, also untereinander, angeordnet werden. Möglich wären auch die Optionen
hbox
, bei der die Elemente horizontal nebeneinander angezeigt werden, oder
card
, bei
der alle Elemente wie Spielkarten übereinander gestapelt werden.
Innerhalb des Containers kreieren Sie nun die eigentlichen Elemente der App. Nor-
malerweise geschieht dies mit dem
Ext.create
-Konstruktor, netterweise hält Sencha
Touch aber hier für Sie eine Möglichkeit zur Kurznotation bereit. Sie können die Ele-
mente als Array direkt in die Konfiguration Ihres Containers schreiben:
items: [{ xtype: 'toolbar' },{ xtype: 'panel' }]
Abbildung 8.21
Toolbar und Panel
Sie haben nun zwei weitere Objekte angelegt, die in den Container geschachtelt wer-
den. Um welches Element es sich dabei handelt, legt die Eigenschaft
xtype
fest. Das
erste Element ist die Kopfzeile, oder auch
toolbar
(Abbildung 8.21). Das zweite Ele-
ment ist ein
panel
, ähnlich wie der Container, ein leeres Element, in das Sie weitere
Elemente oder HTML-Code schreiben können. Hier fügen Sie gleich ein paar Buttons
hinzu, zunächst jedoch zur besseren Lesbarkeit ein paar Zeilenumbrüche:
items: [
{
xtype: 'toolbar'
},
{
Search WWH ::
Custom Search