Sencha Touch – Theme


Sencha Touch – Theme

”;


Previous

Next

Sencha Touch provides a number of themes to be used in your applications. You can add different themes in place of classic theme and see the difference in the output based on the device we are using for the application. This is done simply by replacing the theme CSS file as explained in the following example.

Desktop Theme

Consider your very first Hello World application. The following CSS from the application is used for desktop theme.

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

To see the effect, try the following program −

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

This will produce following result −