Sencha Touch - Tema
O Sencha Touch fornece vários temas para serem usados em seus aplicativos. Você pode adicionar temas diferentes no lugar do tema clássico e ver a diferença na saída com base no dispositivo que estamos usando para o aplicativo. Isso é feito simplesmente substituindo o arquivo CSS do tema, conforme explicado no exemplo a seguir.
Tema da área de trabalho
Considere seu primeiro aplicativo Hello World. O seguinte CSS do aplicativo é usado para o tema da área de trabalho.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssPara ver o efeito, tente o seguinte programa -
<!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>Isso produzirá o seguinte resultado -
Tema do Windows
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssPara ver o efeito, tente o seguinte programa -
<!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>Isso produzirá o seguinte resultado -
Tema IOS
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssPara ver o efeito, tente o seguinte programa -
<!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>Isso produzirá o seguinte resultado -
IOS Classic Theme
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssPara ver o efeito, tente o seguinte programa -
<!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>Isso produzirá o seguinte resultado -
Tema Android
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssPara ver o efeito, tente o seguinte programa -
<!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>Isso produzirá o seguinte resultado -
BlackBerry Theme
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssPara ver o efeito, tente o seguinte programa -
<!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>Isso produzirá o seguinte resultado -