Sencha 触摸滑轨
我开始使用 Sencha Touch 并已阅读他们的“入门 “gide,但是我目前陷入了我想做的事情中,无法找到任何合适的教程或我需要的示例。
我想制作一个面板,以便当用户单击特定按钮时,面板会滑动,顶部的工具栏会消失(或也会滑动),并且会出现一个新的工具栏,就像在本机 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]
});
}
});
I am starting to use Sencha Touch and have already read their "Getting Started" gide, however I am currently stuck in what I want to do and haven't been able to find any proper tutorial or example of what I need.
I want to make a panel so that when a user clicks on a specific button the panel slides and the toolbar on top disappears (or slides as well) and a new one appear just as it would happen on a native iOS app.
Here's my Sencha code so far:
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]
});
}
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
要在单击按钮时进行卡片转换,请在处理程序中使用 setActiveItem 方法:
它还可以直接引用面板组件(如果您更改卡片的顺序并且索引发生变化,这将很有用)。
您的工具栏停靠在外部容器上,而不是卡片上,因此当您更改卡片时它不会改变。如果您希望更改它(或者我想以编程方式更改它),您可以将两个不同的工具栏停靠到卡片面板上。
您还可以使用“间隔”类型将按钮分散到工具的每一侧。这是您的代码,经过调整,可以执行我认为您可能想要的操作(为了清楚起见,仅在电话上)
To make the card transition when you click a button use the setActiveItem method in your handler:
It can also take a reference to the panel component directly (which is useful if you ever change the order of the cards and the indices change).
Your toolbar is docked to the outer container, not to the cards, so it won't change when you change cards. You could dock two different toolbars to the card panels instead if you wanted it to change (or alter it programmatically, I suppose).
Also you can use the 'spacer' type to spread your buttons apart to each side of the tool. Here is your code adjusted to do what I think you probably want (on phone only, for clarity)