Card Layout: Browsing different cards

[brenda]

Hi guys,
I have been browsing and searching the forum since the first day I lay my hands on ExtJS and solved several problems

Recently, I tried to call different panel to be displayed with the click of some buttons. The best and nearest solution that I can get is http://extjs.com/forum/showthread.php?t=29689 and http://extjs.com/forum/showthread.php?t=26986 (Thanks a lot guys )

I've tried to modify that and now I am able to browse the different cards in a non-sequential way. I was thinking of sharing it as a way to say thank you to everyone who has helped me along in some way.

PS: There may be a better solution then this, please share if you know of any.

var navHandler = function(cardNo){

       var lay = event.getLayout();

       if (cardNo == 0){

           lay.setActiveItem(0);

           Ext.getCmp('btn1').disable();

           Ext.getCmp('btn2').enable();

           Ext.getCmp('btn3').enable();

       } else if (cardNo == 1){

           lay.setActiveItem(1);

           Ext.getCmp('btn2').disable();           

           Ext.getCmp('btn1').enable();

           Ext.getCmp('btn3').enable();

       } else if (cardNo == 2){

           lay.setActiveItem(2);

           Ext.getCmp('btn3').disable();

           Ext.getCmp('btn1').enable();

           Ext.getCmp('btn2').enable();

       }

    };

           

     var event = new Ext.Panel({

         title: 'Example Wizard',

        layout:'card',

        activeItem: 0, // make sure the active item is set on the container config!

        bodyStyle: 'padding:15px',

        defaults: {

            // applied to each contained panel

            border:false

        },

        // just an example of one possible navigation scheme, using buttons

        tbar: [

            {

                text: 'Add new'

            },'-', // greedy spacer so that the buttons are aligned to each side

            {

                id: 'btn1',

                text: 'Button 1',

                handler: navHandler.createDelegate(this, [0]),

                disabled: true

            },{

                id: 'Button 2',

                text: 'Week',

                handler: navHandler.createDelegate(this, [1])

            },{

                id: 'btn3',

                text: 'Button 3',

                handler: navHandler.createDelegate(this, [2])

            }

        ],

        // the panels (or "cards") within the layout

        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>'

        }] 

[Animal]

I have a CardPanel class which allowd adding of child items, and automatically creates a toggle Button in its bottom Toolbar for each item added, so you get a button for each one.

I wrote it for a client though, so I'll need his permission to post the code publicly. I'll ask him tonight. (You might have to bump this thread this evening GMT timeone to remind me)

[brenda]

Originally Posted by Animal

I have a CardPanel class which allowd adding of child items, and automatically creates a toggle Button in its bottom Toolbar for each item added, so you get a button for each one.

I wrote it for a client though, so I'll need his permission to post the code publicly. I'll ask him tonight. (You might have to bump this thread this evening GMT timeone to remind me)

That will be nice
I'll bump this up later this evening.. Thank, Animal

[brenda]

bumpz.. Sorry Animal, I was tired and retired early yesterday

[Animal]

OK, I'll email that client, and see if he will let me share the code...

[Animal]

Someone else has been doing something very similar on another thread. I've responsed there: http://extjs.com/forum/showthread.ph...880#post151880

[brenda]

Originally Posted by Animal

Someone else has been doing something very similar on another thread. I've responsed there: http://extjs.com/forum/showthread.ph...880#post151880

Thank Animal, I'll take look at that

[surfyogi]

Brenda,
Animal was trying to help me with his example at the link just above, but I could not get it to work.

I'm not very familiar with CardLayout or CardPanel yet. Do you want to give it a try?
thx, Jeff-