我开始使用 Sencha Touch 并且已经阅读了他们的“入门”指南,但是我目前被困在我想做的事情中,并且无法找到任何合适的教程或我需要的示例。
我想制作一个面板,以便当用户单击特定按钮时,面板滑动并且顶部的工具栏消失(或滑动),并且出现一个新的工具栏,就像在原生 iOS 应用程序上一样。
到目前为止,这是我的 Sencha 代码:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
/*HANDLERS
*********************************************************************************/
var showAlert = function(btn, event) {
Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "' + btn.text + '"', Ext.emptyFn);
};
var tapHandler = function(button, event) {
};
/*BUTTONS
*********************************************************************************/
var aboutAppBtn = [{
text: 'Sobre App',
ui: 'round',
handler: showAlert
}];
var checkInBtn = [{
text: 'Check-in',
ui: 'forward',
handler: tapHandler
}];
var buscarCercaBtn = [{
text: 'Buscar local...',
ui: 'button',
handler: showAlert
}];
var buttonsGroup1 = [{
text: 'Sobre App',
ui: 'round',
handler: showAlert
}, {
text: 'Check-in',
ui: 'forward',
handler: tapHandler
}];
/*PHONE || SCREEN
**********************************************************************************/
if (Ext.is.Phone) {// Phone has far less screen real-estate
var dockedItems = [{
xtype: 'toolbar',
dock : 'top',
ui: 'light',
title: 'My Toolbar',
items: buttonsGroup1
}];
}else{
//var dockedItems = [topTB];
aboutAppBtn.push({xtype: 'spacer'});
var dockedItems = [{
xtype: 'toolbar',
dock : 'top',
ui: 'light',
title: 'My Toolbar',
items: aboutAppBtn.concat(checkInBtn)
},{
xtype: 'button',
dock: 'bottom',
ui: 'action',
text: 'Buscar local...',
handler: showAlert
}];
}
var green = {
style: 'background-color:#3b7E00; color:white;',
title: 'Green',
html: 'Green'
};
var blue = {
style: 'background-color:#0F0; color:white;',
title: 'Blue',
html: 'Blue'
};
/*PANELS
**********************************************************************************/
var mainPanel = new Ext.Panel({
dockedItems: dockedItems,
layout: 'card',
cardSwitchAnimation: {type: 'flip', duration: 500},
fullscreen : true,
items: [green, blue]
});
}
});