Sencha Touch - Componenti
Componente
In termini normali, il componente è qualcosa su cui possiamo lavorare in Sencha Touch. È la parte più piccola di un'applicazione che, sebbene combinata, rende l'intera applicazione. Ogni elemento in Sencha Touch è un componente. Il componente ha varie caratteristiche come possono essere mostrati o nascosti, possono essere comprimibili e possono essere visualizzati sulla pagina.
Contenitore
Anche il contenitore in Sencha Touch è un componente, tuttavia un tipo speciale di componente in quanto consente di aggiungere altri componenti al suo interno. Come suggerisce il nome, il contenitore è il componente che contiene vari componenti al suo interno. Insieme a tutte le funzionalità di un componente, il contenitore ha varie altre funzionalità come può aggiungere e rimuovere componenti e decidere il layout.
Creazione di un contenitore
Sintassi
Ext.create('Ext.Panel', {
html: 'About this app'
});Esempio
<!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>Questo produrrà il seguente risultato:
Aggiunta di un componente
Syntax
container.add(component);Esempio di aggiunta di componenti al contenitore
<!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>Questo produrrà il seguente risultato:
Nascondi e mostra il contenitore
Syntax
container.hide();
container.show();Distruggi il container
Syntax
container.destroy();