Sencha Touch - Tema

Sencha Touch menyediakan sejumlah tema untuk digunakan dalam aplikasi Anda. Anda dapat menambahkan tema yang berbeda sebagai pengganti tema klasik dan melihat perbedaan dalam keluaran berdasarkan perangkat yang kami gunakan untuk aplikasi. Ini dilakukan hanya dengan mengganti file CSS tema seperti yang dijelaskan dalam contoh berikut.

Tema Desktop

Pertimbangkan aplikasi Hello World pertama Anda. CSS berikut dari aplikasi digunakan untuk tema desktop.

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

Untuk melihat efeknya, coba program berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Tema Windows

Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi -

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

Tambahkan CSS berikut untuk menggunakan tema Windows.

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

Untuk melihat efeknya, coba program berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Tema iOS

Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi.

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

Tambahkan CSS berikut untuk menggunakan tema Windows

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

Untuk melihat efeknya, coba program berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Tema IOS Klasik

Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi -

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

Tambahkan CSS berikut untuk menggunakan tema Windows -

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

Untuk melihat efeknya, coba program berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Tema Android

Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi.

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

Tambahkan CSS berikut untuk menggunakan tema Windows.

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

Untuk melihat efeknya, coba program berikut -

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

Ini akan menghasilkan hasil sebagai berikut -

Tema BlackBerry

Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi.

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

Tambahkan CSS berikut untuk menggunakan tema Windows.

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

Untuk melihat efeknya, coba program berikut -

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

Ini akan menghasilkan hasil sebagai berikut -