PDA

View Full Version : Ext.Panel card layout not working for me



macs
12 Apr 2012, 11:09 AM
when i create a panel with card layout as shown in the sencha 2 docs http://docs.sencha.com/touch/2-0/#!/api/Ext.layout.Card all items are show instead of one, and when i do cardView.setActiveItem(0) in the code below i get an error saying tha</span>t the object has no method setActiveItem. I have no idea what I am doing wrong/ here is my code: Please help!!

var cardView = Ext.define('VB1.view.CardView', {
alias: 'widget.cardview',
extend: 'Ext.Panel',
fullscreen: true,
layout: 'card',
config: {
items: [
{html: 'card1'},
{html: 'card2'},
]
}
})
cardView.setActiveItem(0);

estesbubba
12 Apr 2012, 11:20 AM
You're defining a CardView not creating one. You need to do Ext.create() before calling setActiveItem()

macs
12 Apr 2012, 11:44 AM
thanks for you quick reply. now there is no error anymore, but there are still both items shown

Ext.define('VB1.view.CardView', {
alias: 'widget.cardview',
extend: 'Ext.Panel',
fullscreen: true,
layout: 'card',
config: {
items: [
{html: 'card1'},
{html: 'card2'},
]
},
})

var cardView = Ext.create('VB1.view.CardView');


cardView.setActiveItem(0);

by the way i initialize the view in my app.js lauch function like so

var cardView = {xtype: 'cardview'}
Ext.Viewport.add(cardView);
},

estesbubba
12 Apr 2012, 11:57 AM
fullscreen and layout should be in config{}

macs
12 Apr 2012, 12:10 PM
also when i do this. both items are still shown

in the CardView.js:

Ext.define('VB1.view.CardView', {
alias: 'widget.cardview',
extend: 'Ext.Panel',
fullscreen: true,
layout: 'card',
config: {
items: [
{html: 'card1'},
{html: 'card2'},
]
},
})


in app.js

var cardView = Ext.create('VB1.view.CardView');
cardView.setActiveItem(0);
Ext.Viewport.add(cardView);
},

macs
12 Apr 2012, 12:13 PM
now it woks!! thanks so much estesbubba!! with fullscreen and layout in config{} it works.