Ext.net CardLayout Panel Client Side Rotation

  1. #1

    Ext.net CardLayout Panel Client Side Rotation

    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>
  2. #2
    Thanks for sharing!
  3. #3
    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!

Similar Threads

  1. [CLOSED] CardLayout on client side
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 26, 2011, 8:11 AM
  2. [CLOSED] CardLayout Panel focus with client code
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 17, 2009, 5:46 AM
  3. Set Panel Icon Client Side
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Apr 29, 2009, 2:21 PM
  4. [CLOSED] CardLayout client side navigation
    By methode in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 06, 2009, 2:34 PM
  5. Auto Resize Panel in ViewPort on client-side Panel.AutoLoad
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Dec 03, 2008, 3:27 PM

Tags for this Thread

Posting Permissions