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.css

Versuchen 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.css

Fü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.css

Versuchen 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.css

Fü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.css

Versuchen 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.css

Fü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.css

Versuchen 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.css

Fü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.css

Versuchen 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.css

Fü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.css

Versuchen 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: