Ext.js-テーマ

Ext.jsは、アプリケーションで使用される多くのテーマを提供します。クラシックテーマの代わりに別のテーマを追加して、出力の違いを確認できます。これは、先に説明したように、テーマCSSファイルを置き換えるだけで実行されます。

海王星のテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

次のCSSを追加して、Neptuneテーマを使用します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css

効果を確認するには、次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

鮮明なテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

次のCSSを追加して、Neptuneテーマを使用します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css

効果を確認するには、次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

トリトンのテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Tritonテーマを使用するには、次のCSSを追加します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css

効果を確認するには、次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

灰色のテーマ

最初のHello Worldアプリケーションを検討してください。アプリケーションから次のCSSを削除します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Grayテーマを使用するには、次のCSSを追加します。

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css

効果を確認するには、次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
               html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>

   <body>
      <div id = "helloWorldPanel"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

Extjs-themes

Ext.js-テーマ

海王星のテーマ

鮮明なテーマ

トリトンのテーマ

灰色のテーマ

目次