Sencha Touch - Thème
Sencha Touch propose un certain nombre de thèmes à utiliser dans vos applications. Vous pouvez ajouter différents thèmes à la place du thème classique et voir la différence dans la sortie en fonction de l'appareil que nous utilisons pour l'application. Cela se fait simplement en remplaçant le fichier CSS du thème comme expliqué dans l'exemple suivant.
Thème de bureau
Considérez votre toute première application Hello World. Le CSS suivant de l'application est utilisé pour le thème du bureau.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssPour voir l'effet, essayez le programme suivant -
<!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>Cela produira le résultat suivant -
Thème Windows
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssPour voir l'effet, essayez le programme suivant -
<!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>Cela produira le résultat suivant -
Thème IOS
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssPour voir l'effet, essayez le programme suivant -
<!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>Cela produira le résultat suivant -
Thème classique IOS
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssPour voir l'effet, essayez le programme suivant -
<!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>Cela produira le résultat suivant -
Thème Android
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssPour voir l'effet, essayez le programme suivant -
<!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>Cela produira le résultat suivant -
Thème BlackBerry
Considérez votre toute première application Hello World. Supprimez le CSS suivant de l'application.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAjoutez le CSS suivant pour utiliser le thème Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssPour voir l'effet, essayez le programme suivant -
<!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>Cela produira le résultat suivant -