HTML and CSS Reference
In-Depth Information
xtype: 'panel'
}
]
Das hat einen bestimmten Grund: Sie werden die (noch) leeren Objekte gleich mit
weiteren Eigenschaften füllen. Damit Sie den Überblick behalten, definieren Sie pro
Zeile nur eine Eigenschaft. Achten Sie hier besonders auf die Syntax: Bei
items
han-
delt es sich um ein Array, also muss es zwingend mit eckigen Klammern umschlos-
sen werden. Die jeweiligen Elemente sind JSON-Objekte, die immer von geschweiften
Klammern umfasst werden müssen. Zwischen zwei Objekten oder Eigenschaften
muss immer ein Komma stehen. Ein vergessenes Komma oder eine fehlende Klam-
mer sind häufig der Grund dafür, weshalb eine App nicht läuft oder nicht das tut, was
sie soll.
8
Fügen Sie nun Ihrer Kopfzeile einen Titel hinzu:
items: [
{
xtype: 'toolbar',
title: 'Demo App'
},
{
xtype: 'panel',
padding: 10
}
]
Das Panel bekommt außerdem einen kleinen Innenabstand von 10 Pixeln. Prakti-
scherweise heißt diese Eigenschaft analog zur CSS-Syntax
padding
. Als Nächstes
fügen Sie dem Panel ein weiteres Panel und zwei Schaltflächen hinzu (Abbildung
8.22):
items: [
{
xtype: 'toolbar',
title: 'Demo App'
},
{
xtype: 'panel',
padding: 10,
items: [
{
xtype: 'panel'
Search WWH ::
Custom Search