View Full Version : CardLayout Issues

7 Aug 2010, 6:48 AM

When I try to create multiple cardLayout Panels, setCard() function does not work.

setCard() seems to work only when the layout's fullscreen attribute is set to true. However, because I am creating multiple cardLayout panels, I cannot set them all to fullscreen (naturally and it wouldn't let me.. I tried). Is there a way to get around this?

This is the error that I get when I try to call setCard on any cardLayout panel that does not have fullscreen attribute set:
TypeError: Result of expression 'cardPanel.setCard' [undefined] is not a function.

Any ideas why this is happening and how I can get around it?

Thank you.

Code Example:

for( var i = 0; i < 5; i++) {
var cardPanel = new Ext.Panel({
layout: 'card',
items: {html: 'Test'},


7 Aug 2010, 11:23 AM
I think you are doing something wrong in setting up your cards each individually. Think of the carousel example. You set up the Ext.Panel, give it all the settings for how it will behave, and then populate it with cards (items). Then you create the panel. I think you would do the same in this case.

This is an example from the API:

var p = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
html: 'Card 1'
html: 'Card 2'

Maybe your project requires something other than cards. What is it that you are trying to do? Of course, it could also be that you are trying to set card zero, which doesn't exist.

7 Aug 2010, 11:36 AM
Thanks for the reply Nosarious,

I am trying to create a panel with multiple buttons that takes you to a different view everytime you click on a button. So I thought the best way to do it is to have two cards. One card with with all the buttons and the other card that presents each view when a button is clicked.

Now I want to create that for every item in my tab bar, thus my need for multiple card-based panels.

Getting back to the issue, If I place the sample code in a for loop it won't compile because of the fullscreen attribute. If I take out the fullscreen attribute the setCard() function will not work anymore.

Does this description provide a clearer view of my problem?

7 Aug 2010, 11:45 AM
I think if you go deeper into the nested list example you may find find some answers.

It demonstrates the nesting process for the different cards dependent on the buttons. It sounds closer to what you wanted.

As for the for-loop... you may not need it depending on how the structure of your program is going to go. Your views may require a different coding structure and concentrating on how the looping works or doesn't works may be a wild goose chase for now.

7 Aug 2010, 11:57 AM
The nested list sounds great except that it must be bounded to a menu bar. I am trying to do something different where the items for the different cards are part of the main panel.

Here is what I have so far:

The article snippets are currently unclickable, I am trying to have each snippet redirect you to a full version of the article once clicked on.

Maybe I am going down a wild goose chase.. would you recommend a different way to implementing this? Do you see the difference between what I need and the nested lists?