PDA

View Full Version : Ext.net CardLayout Panel Client Side Rotation



NickBin
Dec 04, 2011, 4:09 PM
JavaScript Function


var rotatePanel = function (panel, increment) {
var activeItem = panel.items.indexOf(panel.layout.activeItem);
var totalItems = panel.items.length;
var index = 0;

if (activeItem + increment >= totalItems) {
index = 0;
}
else if (activeItem + increment < 0) {
index = totalItems - 1;
}
else {
index = activeItem + increment;
}

panel.layout.setActiveItem(index);
}


How to Use It?



<ext:Button ID="PreviousButton" runat="server" Text="Previous" Icon="PreviousGreen">
<Listeners>
<Click Handler="rotatePanel(#{WizardPanel},-1);" />
</Listeners>
</ext:Button>
<ext:Button ID="NextButton" runat="server" Text="Next" Icon="NextGreen">
<Listeners>
<Click Handler="rotatePanel(#{WizardPanel},1);" />
</Listeners>
</ext:Button>

Daniil
Dec 05, 2011, 4:41 AM
Thanks for sharing!

equiman
Aug 19, 2014, 2:14 AM
Thanks @NickBin for sharing.

I used it, but not with infinite rotate panel.
My code enable or disable prev and next button when reach the limit.

JavaScript:

var rotatePanel = function (panel, increment) {
var activeItem = panel.items.indexOf(panel.layout.activeItem);
var totalItems = panel.items.length;
var index = activeItem + increment;

var prev = Ext.getCmp('btnPrev');
var next = Ext.getCmp('btnNext')


if (index < 1) {
prev.disable();
}
else if (index >= totalItems - 1) {
next.disable();
}

else {
if (prev.disabled) { prev.enable() };
if (next.disabled) { next.enable() };
}

panel.layout.setActiveItem(index);
}

Ext:

<ext:Button ID="btnPrev" runat="server" Text="Previous" Icon="PreviousGreen" Disabled="true">
<Listeners>
<Click Handler="rotatePanel(#{WizardPanel},-1);" />
</Listeners>
</ext:Button>
<ext:ToolbarFill runat="server" />
<ext:Button ID="btnNext" runat="server" Text="Next" Icon="NextGreen">
<Listeners>
<Click Handler="rotatePanel(#{WizardPanel},+1);" />
</Listeners>
</ext:Button>
I hope help others!