Ext.js - थीम्स

Ext.js आपके अनुप्रयोगों में उपयोग किए जाने वाले कई थीम प्रदान करता है। आप क्लासिक थीम के स्थान पर एक अलग विषय जोड़ सकते हैं और आउटपुट में अंतर देख सकते हैं। यह केवल विषय सीएसएस फ़ाइल की जगह के रूप में आगे समझाया गया है।

नेपच्यून थीम

अपने पहले हैलो वर्ल्ड एप्लिकेशन पर विचार करें। आवेदन से निम्नलिखित सीएसएस निकालें।

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

नेप्च्यून विषय का उपयोग करने के लिए निम्नलिखित सीएसएस जोड़ें।

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>

उपरोक्त कार्यक्रम निम्नलिखित परिणाम का उत्पादन करेगा -

कुरकुरा थीम

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

नेप्च्यून विषय का उपयोग करने के लिए निम्नलिखित सीएसएस जोड़ें।

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>

उपरोक्त कार्यक्रम निम्नलिखित परिणाम का उत्पादन करेगा -

ट्राइटन थीम

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.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>

उपरोक्त कार्यक्रम निम्नलिखित परिणाम का उत्पादन करेगा -

ग्रे थीम

https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.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>

उपरोक्त कार्यक्रम निम्नलिखित परिणाम का उत्पादन करेगा -