Sencha Touch - Carte de mise en page
La description
Card- Cette mise en page organise différents composants sous forme d'onglets. Les onglets seront affichés en haut du conteneur. Chaque fois qu'un seul onglet est visible et chaque onglet est considéré comme un composant différent.
Syntaxe
Voici la syntaxe simple pour utiliser la mise en page de la carte.
layout: 'card'Exemple
Voici un exemple simple montrant l'utilisation de la mise en page de la carte.
<!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() {
var panel = Ext.create('Ext.Panel', {
layout: 'card', items: [
{
html: "First Item index value is 0"
},
{
html: "Second Item index value is 1 which we are setting as active index"
},
{
html: "Third Item index value is 2"
},
{
html: "Fourth Item index value is 3"
}
]
});
panel.setActiveItem(1);
Ext.Viewport.add(panel);
}
});
</script>
</head>
<body>
</body>
</html>Cela produira le résultat suivant -