Afficher/masquer une barre d'outils avec l'animation de diapositives dans le Sencha Touch
J'ai une barre d'outils ancrée en haut de la vue principale, et un panneau de mise en carte ci-dessous. L'idée est d'avoir la barre d'outils, faites glisser vers le bas à partir du haut sur le toucher d'un bouton, et remettez-le en place lorsque fermée. Il ne faut pas superposer le contenu ci-dessous, tout en dessous, il doit glisser vers le bas aussi bien pour faire de la place pour la barre d'outils.
Tout d'abord, comment puis-je animer la barre d'outils afficher/masquer avec une transition de diapo? C'est de cette façon que je suis en train de montrer/cacher la barre d'outils du moment:
toggleMenu:function(){
if (tkwine.views.menu.hidden){
tkwine.views.menu.show();
}else{
tkwine.views.menu.hide();
}
//force the viewport to lay itself out again after toolbar hide/show
tkwine.viewport.doComponentLayout();
}
Deuxièmement, cela semble bien fonctionner une fois, mais après affichage et masquage de la barre d'outils une fois, la deuxième fois j'ai tenté de le montrer, la barre d'outils des superpositions le contenu ci-dessous au lieu de le pousser vers le bas. Pourquoi en serait-il?
C'est ma fenêtre si elle peut aider à résoudre le deuxième problème:
tkwine.views.Viewport = Ext.extend(Ext.Panel, {
id: 'viewport',
layout: 'card',
cardSwitchAnimation: 'slide',
fullscreen: true,
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(tkwine.views, {
menu: new tkwine.views.Menu(),
home: new tkwine.views.Home(),
trailsList: new tkwine.views.TrailsList(),
trailDetail: new tkwine.views.TrailDetail(),
createTrail: new tkwine.views.CreateTrail()
});
Ext.apply(tkwine.controllers, {
historyManager: new tkwine.controllers.HistoryManager(tkwine.views.home)
});
Ext.apply(this, {
dockedItems: [tkwine.views.menu],
items: [
tkwine.views.home,
tkwine.views.trailsList,
tkwine.views.trailDetail,
tkwine.views.createTrail,
],
});
tkwine.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
et ma barre d'outils:
tkwine.views.Menu = Ext.extend(Ext.Toolbar, {
hidden: true,
overlay: false,
layout: {
pack: 'center',
},
defaults:{
ui: 'plain',
iconMask: true,
},
initComponent: function() {
Ext.apply(this, {
items:[
{
iconCls: 'toolBarIconExplore',
handler:function(button, event){
Ext.dispatch({
controller: tkwine.controllers.controller,
action: 'showWineTrails',
});
}
},
{
xtype: 'spacer',
},
{
iconCls: 'toolBarIconCreate',
handler:function(button, event){
Ext.dispatch({
controller: tkwine.controllers.controller,
action: 'showCreateTrail',
});
}
},
{
xtype: 'spacer',
},
{
iconCls: 'toolBarIconItineraries',
handler:function(button, event){
}
},
{
xtype: 'spacer',
},
{
iconCls: 'toolBarIconCellar',
handler:function(button, event){
}
},
{
xtype: 'spacer',
},
{
iconCls: 'toolBarIconAction',
handler:function(button, event){
}
}
],
});
tkwine.views.Menu.superclass.initComponent.apply(this, arguments);
},
});
Ext.reg('menu', tkwine.views.Menu);
OriginalL'auteur Angela | 2011-07-08
Vous devez vous connecter pour publier un commentaire.
Essayez d'ajouter des auditeurs de votre menu (attention, pas testé):
Votre deuxième problème est à cause de votre conditionnelle if (tkwine.les vues.menu.caché).
caché est une option de configuration, pas une propriété publique, de sorte que vous ne pouvez pas y accéder directement.
Vous devez utiliser de la lecture:
regardé par le biais de la barre d'outils de l'api doc. il s'avère qu'il est une option de configuration (pour tous les composants) appelé "showAnimation". showAnimation: { type: "slide", direction: "vers le bas" } œuvres pour quelque chose que je suis en train de faire au moins. Aussi, vous ne savez pas si cela est important, mais je ne pouvais pas trouver un "dock" sur votre menu; il peut avoir besoin de quai: "top"?
Merci pour votre aide. Cela fonctionne après un effet de mode, mais il est évident que le sencha touch n'est pas conçu pour faire ce dont j'ai besoin (la diapositive s'anime, mais le doComponentLayout par la suite ne l'est pas, de sorte qu'il ruine l'effet). Je suis de l'acceptation de votre réponse, car je crois que c'est une limitation de Sencha Touch.
OriginalL'auteur Jonathan Packer
OriginalL'auteur tarikakyol
Code ci-dessous fonctionne pour moi quelque chose de similaire. Cependant, j'ai beaucoup plus que cela, donc je n'ai pas testé le glissement de lui-même. Cette méthode ne nécessite pas de faire doComponentLayout comme ça gracieusement glisse le tout dans la fenêtre d'affichage. Si cela ne fonctionne pas, ne pas la rejeter, mais les travaux sur ce qu'il fait exactement ce que vous voulez sur ma fin.
OriginalL'auteur aaridici