Sencha Touch-테마

Sencha Touch는 애플리케이션에서 사용할 수있는 다양한 테마를 제공합니다. 클래식 테마 대신 다른 테마를 추가하고 애플리케이션에 사용하는 장치에 따라 출력의 차이를 확인할 수 있습니다. 다음 예제에서 설명한대로 테마 CSS 파일을 바꾸면됩니다.

데스크탑 테마

첫 번째 Hello World 애플리케이션을 고려하십시오. 응용 프로그램의 다음 CSS는 데스크탑 테마에 사용됩니다.

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

효과를 확인하려면 다음 프로그램을 시도하십시오.

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

이것은 다음 결과를 생성합니다-

Windows 테마

첫 번째 Hello World 애플리케이션을 고려하십시오. 응용 프로그램에서 다음 CSS를 제거하십시오-

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

Windows 테마를 사용하려면 다음 CSS를 추가하십시오.

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

효과를 확인하려면 다음 프로그램을 시도하십시오.

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

이것은 다음 결과를 생성합니다-

IOS 테마

첫 번째 Hello World 애플리케이션을 고려하십시오. 애플리케이션에서 다음 CSS를 제거하십시오.

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

Windows 테마를 사용하려면 다음 CSS를 추가하세요.

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

효과를 확인하려면 다음 프로그램을 시도하십시오.

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

이것은 다음 결과를 생성합니다-

IOS 클래식 테마

첫 번째 Hello World 애플리케이션을 고려하십시오. 응용 프로그램에서 다음 CSS를 제거하십시오-

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

Windows 테마를 사용하려면 다음 CSS를 추가하십시오.

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

효과를 확인하려면 다음 프로그램을 시도하십시오.

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

이것은 다음 결과를 생성합니다-

안드로이드 테마

첫 번째 Hello World 애플리케이션을 고려하십시오. 애플리케이션에서 다음 CSS를 제거하십시오.

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

Windows 테마를 사용하려면 다음 CSS를 추가하십시오.

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

효과를 확인하려면 다음 프로그램을 시도하십시오.

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

이것은 다음 결과를 생성합니다-

BlackBerry 테마

첫 번째 Hello World 애플리케이션을 고려하십시오. 애플리케이션에서 다음 CSS를 제거하십시오.

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

Windows 테마를 사용하려면 다음 CSS를 추가하십시오.

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

효과를 확인하려면 다음 프로그램을 시도하십시오.

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

이것은 다음 결과를 생성합니다-