Sencha Touch - Tema

Sencha Touch fornisce una serie di temi da utilizzare nelle tue applicazioni. Puoi aggiungere diversi temi al posto del tema classico e vedere la differenza nell'output in base al dispositivo che stiamo utilizzando per l'applicazione. Questo viene fatto semplicemente sostituendo il file CSS del tema come spiegato nel seguente esempio.

Tema del desktop

Considera la tua prima applicazione Hello World. Il seguente CSS dall'applicazione viene utilizzato per il tema del desktop.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Per vedere l'effetto, prova il seguente programma:

<!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>

Questo produrrà il seguente risultato:

Tema di Windows

Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione:

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Aggiungi il seguente CSS per utilizzare il tema di Windows.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css

Per vedere l'effetto, prova il seguente programma:

<!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>

Questo produrrà il seguente risultato:

Tema IOS

Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Aggiungi il seguente CSS per utilizzare il tema di Windows

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css

Per vedere l'effetto, prova il seguente programma:

<!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>

Questo produrrà il seguente risultato:

Tema classico IOS

Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione:

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Aggiungi il seguente CSS per utilizzare il tema di Windows:

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css

Per vedere l'effetto, prova il seguente programma:

<!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>

Questo produrrà il seguente risultato:

Tema Android

Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Aggiungi il seguente CSS per utilizzare il tema di Windows.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css

Per vedere l'effetto, prova il seguente programma:

<!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>

Questo produrrà il seguente risultato:

Tema BlackBerry

Considera la tua prima applicazione Hello World. Rimuovi il seguente CSS dall'applicazione.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css

Aggiungi il seguente CSS per utilizzare il tema di Windows.

https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css

Per vedere l'effetto, prova il seguente programma:

<!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>

Questo produrrà il seguente risultato: