Sencha Touch - Thema
Sencha Touch bietet eine Reihe von Themen, die in Ihren Anwendungen verwendet werden können. Sie können anstelle des klassischen Themas verschiedene Themen hinzufügen und den Unterschied in der Ausgabe basierend auf dem Gerät sehen, das wir für die Anwendung verwenden. Dies erfolgt einfach durch Ersetzen der Theme-CSS-Datei, wie im folgenden Beispiel erläutert.
Desktop-Thema
Betrachten Sie Ihre allererste Hello World-Anwendung. Das folgende CSS aus der Anwendung wird für das Desktop-Design verwendet.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssVersuchen Sie das folgende Programm, um den Effekt zu sehen:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Dies führt zu folgendem Ergebnis:
Windows-Design
Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssFügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssVersuchen Sie das folgende Programm, um den Effekt zu sehen:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Dies führt zu folgendem Ergebnis:
IOS-Thema
Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssFügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssVersuchen Sie das folgende Programm, um den Effekt zu sehen:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Dies führt zu folgendem Ergebnis:
IOS Classic Theme
Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssFügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssVersuchen Sie das folgende Programm, um den Effekt zu sehen:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Dies führt zu folgendem Ergebnis:
Android-Thema
Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssFügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssVersuchen Sie das folgende Programm, um den Effekt zu sehen:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Dies führt zu folgendem Ergebnis:
BlackBerry-Thema
Betrachten Sie Ihre allererste Hello World-Anwendung. Entfernen Sie das folgende CSS aus der Anwendung.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssFügen Sie das folgende CSS hinzu, um das Windows-Design zu verwenden.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssVersuchen Sie das folgende Programm, um den Effekt zu sehen:
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Dies führt zu folgendem Ergebnis: