Sencha Touch - Composants
Composant
En termes normaux, le composant est quelque chose sur lequel nous pouvons travailler dans Sencha Touch. C'est la plus petite partie d'une application qui, combinée, constitue l'ensemble de l'application. Chaque élément de Sencha Touch est un composant. Le composant a diverses fonctionnalités telles qu'ils peuvent être affichés ou masqués, ils peuvent être pliables et ils peuvent être rendus sur la page.
Récipient
Le conteneur dans Sencha Touch est également un composant, mais un type spécial de composant car il vous permet d'ajouter d'autres composants à l'intérieur. Comme son nom l'indique, le conteneur est le composant qui contient divers composants à l'intérieur. Outre toutes les fonctionnalités d'un composant, le conteneur possède diverses autres fonctionnalités telles qu'il peut ajouter et supprimer des composants et décider de la disposition.
Création d'un conteneur
Syntaxe
Ext.create('Ext.Panel', {
html: 'About this app'
});Exemple
<!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.Panel', {
fullscreen: true,layout: 'hbox',defaults: {
flex: 1
},
items: {
html: 'First Panel',style: 'background-color: #5E99CC;'
}
});
}
});</script>
</head>
<body>
</body>
</html>Cela produira le résultat suivant -
Ajout d'un composant
Syntax
container.add(component);Exemple d'ajout de composant au conteneur
<!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 aboutPanel = Ext.create('Ext.Panel', {
html: 'Newly added'
});
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true, layout: 'hbox', defaults: {
flex: 1
},
items: {
html: 'First Panel',
style: 'background-color: #5E99CC;'
}
});
//now we add the first panel inside the second
mainPanel.add(aboutPanel);
}
});
</script>
</head>
<body>
</body>
</html>Cela produira le résultat suivant -
Masquer et afficher le conteneur
Syntax
container.hide();
container.show();Détruire le conteneur
Syntax
container.destroy();