Sencha Touch - Tema
Sencha Touch proporciona una serie de temas para usar en sus aplicaciones. Puede agregar diferentes temas en lugar del tema clásico y ver la diferencia en la salida según el dispositivo que estamos usando para la aplicación. Esto se hace simplemente reemplazando el archivo CSS del tema como se explica en el siguiente ejemplo.
Tema de escritorio
Considere su primera aplicación Hello World. El siguiente CSS de la aplicación se utiliza para el tema de escritorio.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssPara ver el efecto, pruebe el siguiente 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>Esto producirá el siguiente resultado:
Tema de Windows
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssPara ver el efecto, pruebe el siguiente 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>Esto producirá el siguiente resultado:
Tema de iOS
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssPara ver el efecto, pruebe el siguiente 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>Esto producirá el siguiente resultado:
Tema clásico de iOS
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows:
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssPara ver el efecto, pruebe el siguiente 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>Esto producirá el siguiente resultado:
Tema de Android
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssPara ver el efecto, pruebe el siguiente 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>Esto producirá el siguiente resultado:
Tema de BlackBerry
Considere su primera aplicación Hello World. Elimine el siguiente CSS de la aplicación.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAgregue el siguiente CSS para usar el tema de Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssPara ver el efecto, pruebe el siguiente 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>Esto producirá el siguiente resultado: