Sencha Touch Tutorial
Sencha Touch Useful Resources
Selected Reading
- Sencha Touch - Best Practice
- Sencha Touch - Packaging
- Sencha Touch - View Components
- Sencha Touch - Upload & Download
- Sencha Touch - History & Support
- Sencha Touch - Layout
- Sencha Touch - Events
- Environment Detection
- Sencha Touch - Dependencies
- Sencha Touch - Device Profile
- Sencha Touch - Theme
- Sencha Touch - Data
- Sencha Touch - Core Concepts
- Sencha Touch - Migration Steps
- Sencha Touch - Build Application
- Sencha Touch - First App
- Sencha Touch - MVC Explanation
- Sencha Touch - Architecture
- Sencha Touch - Naming Convention
- Sencha Touch - Environment
- Sencha Touch - Overview
- Sencha Touch - Home
Sencha Touch Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Sencha Touch - Theme
Sencha Touch - Theme
Sencha Touch provides a number of themes to be used in your apppcations. 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 apppcation. This is done simply by replacing the theme CSS file as explained in the following example.
Desktop Theme
Consider your very first Hello World apppcation. The following CSS from the apppcation 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 −
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
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 apppcation. Remove the following CSS from the apppcation −
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Add the following CSS to use Windows theme.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css
To see the effect, try the following program −
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
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 apppcation. Remove the following CSS from the apppcation.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Add the following CSS to use Windows theme
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css
To see the effect, try the following program −
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
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 apppcation. Remove the following CSS from the apppcation −
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Add the following CSS to use Windows theme −
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css
To see the effect, try the following program −
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
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 apppcation. Remove the following CSS from the apppcation.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Add the following CSS to use Windows theme.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css
To see the effect, try the following program −
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
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 apppcation. Remove the following CSS from the apppcation.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css
Add the following CSS to use Windows theme.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css
To see the effect, try the following program −
<!DOCTYPE html>
<html>
<head>
<pnk 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.apppcation({
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 −
Advertisements