WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 337

8
Abbildung 8.23 So soll es aussehen.
Meist ist es egal, ob Sie für Bezeichner die Eigenschaft html oder text nutzen - html
erlaubt jedoch einen etwas größeren Gestaltungsspielraum. Dabei müssen Sie zwei
Dinge beachten: Innerhalb der HTML-Eigenschaft dürfen Sie keine Zeilenumbrüche
verwenden. Außerdem werden alle HTML-Elemente von Sencha Touch mit dem Fra-
mework-eigenen CSS gestylt. So ist die Schriftart bereits per Standard auf Helvetica
bzw. Droid Sans festgelegt, Schriftgrößen und Farben sind ebenfalls definiert. Das hat
den Vorteil, dass sich alle Elemente bereits von Haus aus wie eine App und somit
»wie aus einem Guss« anfühlen. Dies kann manchmal aber auch ein wenig ein-
schränkend sein. Wie Sie diese Standardstile umgehen, zeigen wir Ihnen in Abschnitt
8.3.3 im Abschnitt »Der Profi-Trick - Kopfzeile anpassen«.
Eine einfache Möglichkeit, zumindest das »Aneinanderkleben« der Buttons zu ver-
hindern, bietet die Eigenschaft margin : Analog zur CSS-Syntax bietet sie die Möglich-
keit, den Außenabstand eines jeden Elements festzulegen. Spendieren Sie Ihren
Buttons ein paar Pixel! Anstatt nun aber beiden Buttons und dem Panel eine margin -
Eigenschaft zuzuweisen, definieren Sie im übergeordneten Panel eine Standardein-
stellung, welche an die Unterelemente vererbt wird:
defaults: {
margin: 10
}
Puuh, Sie haben es fast geschafft - doch halt, sollte der zweite Button nicht in Rot dar-
gestellt werden? Sencha Touch bietet die Möglichkeit, Schaltflächen je nach deren
Funktion in einer anderen Farbe erscheinen zu lassen:
{
xtype: 'button',
text: 'Klick mich nicht!',