Sencha Touch - Navegação
Descrição
Isso é para criar uma visualização de navegação.
Sintaxe
A seguir está a sintaxe simples para criar um formulário de navegação.
Ext.create('Ext.Form', {})Exemplo
A seguir está um exemplo simples que mostra o uso.
<!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() {
//create the navigation view and add it into the Ext.Viewport
var view = Ext.Viewport.add({
xtype: 'navigationview',
/*
* We only give it one item by default, which will be the only
* item in the 'stack' when it loads
*/
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,
//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
/*
* When someone taps this button,
* it will push another view into stack
*/
view.push({
//this one also has a title
title: 'Second View', padding: 10,
//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//pop current view out of the stack
view.pop();
}
}
]
});
}
}
]
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Isso produzirá o seguinte resultado -