我正在为我的向导类型应用程序使用卡片布局。如何在点击下一个和上一个按钮时实现动画效果。
var navigate = function(panel, direction){
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
Ext.create('Ext.panel.Panel', {
title: 'Example Wizard',
width: 300,
height: 200,
layout: {type: 'card' ,
animation: {
type: 'slide',
}},
bodyStyle: 'padding:15px',
defaults: {
border: false
},
bbar: [
{
id: 'move-prev',
text: 'Back',
handler: function(btn) {
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->',
{
id: 'move-next',
text: 'Next',
handler: function(btn) {
navigate(btn.up("panel"), "next");
}
}
],
items: [{
id: 'card-0',
html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
},{
id: 'card-1',
html: '<p>Step 2 of 3</p>'
},{
id: 'card-2',
html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
}],
renderTo: Ext.getBody()
});
答案 0 :(得分:4)
我能够通过覆盖卡片布局的setActiveItem方法来实现动画淡出。您可以在此处查看针对您的示例的操作:http://jsfiddle.net/q7Ytj/4/。
在应用程序初始化步骤中执行此操作:
Ext.override(Ext.layout.container.Card, {
setActiveItem: function (newCard) {
var me = this,
owner = me.owner,
oldCard = me.activeItem,
rendered = owner.rendered,
newIndex;
newCard = me.parseActiveItem(newCard);
newIndex = owner.items.indexOf(newCard);
// If the card is not a child of the owner, then add it.
// Without doing a layout!
if (newIndex === -1) {
newIndex = owner.items.items.length;
Ext.suspendLayouts();
newCard = owner.add(newCard);
Ext.resumeLayouts();
}
// Is this a valid, different card?
if (newCard && oldCard !== newCard) {
// Fire the beforeactivate and beforedeactivate events on the cards
if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
return false;
}
if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
return false;
}
if (rendered) {
Ext.suspendLayouts();
// If the card has not been rendered yet, now is the time to do so.
if (!newCard.rendered) {
me.renderItem(newCard, me.getRenderTarget(), owner.items.length);
}
var handleNewCard = function () {
// Make sure the new card is shown
if (newCard.hidden) {
newCard.show();
}
if (!newCard.tab) {
var newCardEl = newCard.getEl();
newCardEl.dom.style.opacity = 1;
if (newCardEl.isStyle('display', 'none')) {
newCardEl.setDisplayed('');
} else {
newCardEl.show();
}
}
// Layout needs activeItem to be correct, so set it if the show has not been vetoed
if (!newCard.hidden) {
me.activeItem = newCard;
}
Ext.resumeLayouts(true);
};
var handleOldCard = function () {
if (me.hideInactive) {
oldCard.hide();
oldCard.hiddenByLayout = true;
}
oldCard.fireEvent('deactivate', oldCard, newCard);
};
if (oldCard && !newCard.tab) {
var oldCardEl = oldCard.getEl();
oldCardEl.fadeOut({
callback: function () {
handleOldCard();
handleNewCard();
}
});
} else if (oldCard) {
handleOldCard();
handleNewCard();
} else {
handleNewCard();
}
} else {
me.activeItem = newCard;
}
newCard.fireEvent('activate', newCard, oldCard);
return me.activeItem;
}
return false;
}
});
答案 1 :(得分:1)
我做了如下。
var navigate = function(panel, direction) {
var layout = panel.getLayout();
layout[direction]();
//change here////////////////
var el = panel.getEl();
el.slideIn('l', {
duration : 500
});
//////////////////////////
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
按照此链接中的内容进行操作 http://www.walkingtree.in/forums/showthread.php?1369-How-to-animate-card-layout-items-in-ExtJs