Sencha touch provides a number of themes to be used in your
applications. You can add different theme in place of classic theme and
see the difference in output based on the device we are using for the
application.This is done simply by replacing theme CSS file as explained
below.
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.cssTo see the effect, try the following program:
<!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:
Windows Theme
Consider your very first Hello World application. Remove the following CSS from the application:https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdd the following CSS to use Windows theme:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssTo see the effect, try the following program:
<!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>This will produce following result:
IOS Theme
Consider your very first Hello World application. Remove the following CSS from the application:https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdd the following CSS to use Windows theme:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssTo see the effect, try the following program:
<!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>This will produce following result:
IOS Classic Theme
Consider your very first Hello World application. Remove the following CSS from the application:https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdd the following CSS to use Windows theme:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssTo see the effect, try the following program:
<!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>This will produce following result:
Android Theme
Consider your very first Hello World application. Remove the following CSS from the application:https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdd the following CSS to use Windows theme:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssTo see the effect, try the following program:
<!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>This will produce following result:
BlackBerry Theme
Consider your very first Hello World application. Remove the following CSS from the application:https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdd the following CSS to use Windows theme:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssTo see the effect, try the following program:
<!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>This will produce following result:
No comments:
Post a Comment