PDA

View Full Version : Second Card of Card Layout Is Blank When Showing It More Than Once



achapman
4 Aug 2010, 12:14 PM
I have a pretty simple setup using 0.93. I have a form (on card 1) with a button that creates a carousel and adds it to a second card and then displays it. The first time I click the button, the carousel and its data show up fine. I click the back button in the carousel to return to the form, and if I click to go to the carousel again, the second card that should be showing the carousel is blank. Below is my code, any help with this would be greatly appreciated.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var getWellData = function() {

Ext.getCmp('dataPanel').removeAll(true);

Ext.getCmp('dataPanel').add(new Ext.Carousel({id: 'carousel1'}));

var temp = "0~0~1~2~3";
var seperatedString = temp.split("~");

if (seperatedString.length < 2) { //bad return
Ext.getCmp('carousel1').add(new Ext.Panel({id: 'card 1',title: 'Card 1',scroll: 'vertical'}));
Ext.getCmp('card 1').update('error getting data');
}
else {
for (i=2;i<seperatedString.length;i++)
{
var myAnswer = seperatedString[i];

Ext.getCmp('carousel1').add(new Ext.Panel({id: 'card' + i,title: 'Card ' + i,scroll: 'vertical', layout: {type:'vbox'}}));

Ext.getCmp('card' + i).add(new Ext.Toolbar({
type: 'toolbar',
ui: 'dark',
dock: 'top',
items: [{
text: 'Back',
ui: 'back',
maxWidth: '80',
handler: backToMain
}]
}));
Ext.getCmp('card' + i).update(myAnswer);
}
}

Ext.getCmp('carousel1').doLayout();

Ext.getCmp('mainNav').setCard(1);

};

var backToMain = function() {
Ext.getCmp('mainNav').setCard(0);
};

var backToData = function() {
Ext.getCmp('mainNav').setCard(1);
};

var button1 = new Ext.Button({
text: 'Submit',
maxHeight: '40',
ui: 'round',
handler: getWellData
});

var dataPanel = new Ext.Panel({
id: 'dataPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
}
});

var formBase = {
items: [
{
xtype: 'fieldset',
title: 'Select a Value',
items: [{
xtype: 'select',
id: 'wellsList',
name: 'wellsList',
options: [{text: "1", value: "1"}]
}]
},
button1
]
};

var form = new Ext.form.FormPanel(formBase);

var formPanel = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [form]
});

var mainNav = new Ext.Panel({
id: 'mainNav',
fullscreen: true,
layout: 'card',
defaults: {
flex: 1
},
items: [form,dataPanel]
});
}
});

flashape
4 Aug 2010, 12:29 PM
I am also having issues with the card layout when selecting an item more than once in .93. Was working fine with .92

flashape
4 Aug 2010, 12:51 PM
actually, the issue seems to have been that I was not checking if a card with the same id already exists before attempting to create it:



// the model
{
title: 'Panel Title',
thumb: '/images/nav_icons/cc.jpg',
card: {xtype:'cctabs', id:'cctabs''}
}



//within the itemtap handler function:
var theCard = Ext.getCmp(card.id) || Ext.create(card);
this.setCard(theCard, model.get('animation') || 'slide');

evant
4 Aug 2010, 4:19 PM
You can't have the same id on multiple components, it must be unique.

achapman
5 Aug 2010, 4:04 AM
I was under the assumption that the Ext.getCmp('dataPanel').removeAll(true); line was cleaning those up for me to reuse those ids. I guess it doesn't work that way.

evant
5 Aug 2010, 4:12 AM
You're correcting, removing them lets you re-use the id, but at a glance there's some funky stuff going on in the code, so it could be something else.

achapman
5 Aug 2010, 4:30 AM
I changed it a bit using flashape's suggestion, but there is still some funkyness when showing the carousel the second time. Please try running the code evant and see if you have any ideas/suggestions. Thanks.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {

var getWellData = function() {

Ext.getCmp('carousel1').removeAll(true);

var temp = "0~0~1~2~3";
var seperatedString = temp.split("~");

if (seperatedString.length < 2) { //bad return
var theCard = Ext.getCmp('card 1') || Ext.create(new Ext.Panel({id: 'card 1',title: 'Card 1',scroll: 'vertical', layout: {type:'vbox'}}));

theCard.removeAll(true);

Ext.getCmp('carousel1').add(theCard);
Ext.getCmp('card 1').update('error getting data');
}
else {
for (i=2;i<seperatedString.length;i++)
{
var myAnswer = seperatedString[i];

var theCard = Ext.getCmp('card' + i) || Ext.create(new Ext.Panel({id: 'card' + i,title: 'Card ' + i,scroll: 'vertical', layout: {type:'vbox'}}));

theCard.removeAll(true);

Ext.getCmp('carousel1').add(theCard);

Ext.getCmp('card' + i).add(new Ext.Toolbar({
type: 'toolbar',
ui: 'dark',
dock: 'top',
items: [{
text: 'Back',
ui: 'back',
maxWidth: '80',
handler: backToMain
}]
}));
Ext.getCmp('card' + i).update(myAnswer);
}
}

Ext.getCmp('carousel1').doLayout();

Ext.getCmp('mainNav').setCard(1);

};

var backToMain = function() {
Ext.getCmp('mainNav').setCard(0);
};

var backToData = function() {
Ext.getCmp('mainNav').setCard(1);
};

var button1 = new Ext.Button({
text: 'Submit',
maxHeight: '40',
ui: 'round',
handler: getWellData
});

var carousel1 = new Ext.Carousel({
id: 'carousel1'
});

var dataPanel = new Ext.Panel({
id: 'dataPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1]
});

var formBase = {
items: [
{
xtype: 'fieldset',
title: 'Select a Value',
items: [{
xtype: 'select',
id: 'wellsList',
name: 'wellsList',
options: [{text: "1", value: "1"}]
}]
},
button1
]
};

var form = new Ext.form.FormPanel(formBase);

var formPanel = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [form]
});

var mainNav = new Ext.Panel({
id: 'mainNav',
fullscreen: true,
layout: 'card',
defaults: {
flex: 1
},
items: [form,dataPanel]
});
}
});

evant
5 Aug 2010, 4:45 AM
What are you actually trying to do? Just update the contents of a carousel at runtime?

achapman
5 Aug 2010, 4:53 AM
Well essentially yes, but with the data I am grabbing in the full application, I never know how many cards the carousel will need and each card will need its own toolbar since the toolbar's buttons can be different depending on what data is in the current card.

evant
5 Aug 2010, 4:58 AM
Some comments:




Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

var getWellData = function(){

/**
* If you're calling Ext.getCmp over and over, save a variable reference
*/
Ext.getCmp('carousel1').removeAll(true);

var temp = "0~0~1~2~3";
var seperatedString = temp.split("~");

if (seperatedString.length < 2) { //bad return
/*
* This is redundant. If you remove everything from the carousel, the card will never exist.
*/
var theCard = Ext.getCmp('card 1') || Ext.create(new Ext.Panel({
id: 'card 1',
title: 'Card 1',
scroll: 'vertical',
layout: {
type: 'vbox'
}
}));

// Also redundant.
theCard.removeAll(true);


Ext.getCmp('carousel1').add(theCard);
Ext.getCmp('card 1').update('error getting data');
} else {
for (i = 2; i < seperatedString.length; i++) {
var myAnswer = seperatedString[i];

// Redundant, see above
var theCard = Ext.getCmp('card' + i) || Ext.create(new Ext.Panel({
id: 'card' + i,
title: 'Card ' + i,
scroll: 'vertical',
layout: {
type: 'vbox'
}
}));

// Also redundant
theCard.removeAll(true);

Ext.getCmp('carousel1').add(theCard);

// save reference
// I assume you want the toolbar to be docked to the top, in which case
// you should put it in the config.
Ext.getCmp('card' + i).add(new Ext.Toolbar({
type: 'toolbar',
ui: 'dark',
dock: 'top',
items: [{
text: 'Back',
ui: 'back',
maxWidth: '80',
handler: backToMain
}]
}));

// don't use update() and items at the same time.
// update with docked items is ok
Ext.getCmp('card' + i).update(myAnswer);
}
}

Ext.getCmp('carousel1').doLayout();

Ext.getCmp('mainNav').setCard(1);

};

var backToMain = function(){
Ext.getCmp('mainNav').setCard(0);
};

var backToData = function(){
Ext.getCmp('mainNav').setCard(1);
};

var button1 = new Ext.Button({
text: 'Submit',
maxHeight: '40',
ui: 'round',
handler: getWellData
});

var carousel1 = new Ext.Carousel({
id: 'carousel1'
});

// Redundant panel. Just put the carousel in the card layout
var dataPanel = new Ext.Panel({
id: 'dataPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1]
});

var formBase = {
items: [{
xtype: 'fieldset',
title: 'Select a Value',
items: [{
xtype: 'select',
id: 'wellsList',
name: 'wellsList',
options: [{
text: "1",
value: "1"
}]
}]
}, button1]
};

var form = new Ext.form.FormPanel(formBase);

// Ditto, redundant formPanel
var formPanel = new Ext.Panel({
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [form]
});

var mainNav = new Ext.Panel({
id: 'mainNav',
fullscreen: true,
layout: 'card',
// flex has no bearing in a card layout.
defaults: {
flex: 1
},
items: [form, dataPanel]
});
}
});

evant
5 Aug 2010, 5:08 AM
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

var getWellData = function(){
var carousel = Ext.getCmp('carousel'),
temp = "0~0~1~2~3",
seperatedString = temp.split("~"),
i = 2,
len = seperatedString.length,
myAnswer,
card;

carousel.removeAll();
if (len < 2) { //bad return
carousel.add({
title: 'Card 1',
html: 'Error',
scroll: 'vertical'
});
} else {
for (; i < len; i++) {
myAnswer = seperatedString[i];

carousel.add({
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'dark',
items: [{
text: 'Back',
ui: 'back',
handler: backToMain
}],
}],
title: 'Card ' + i,
scroll: 'vertical',
html: myAnswer
});
}
}
Ext.getCmp('mainNav').setCard(1);
carousel.doLayout();
carousel.setCard(0);
};

var backToMain = function(){
mainNav.setCard(0);
};

var backToData = function(){
mainNav.setCard(1);
};

var mainNav = new Ext.Panel({
id: 'mainNav',
fullscreen: true,
layout: 'card',
items: [{
xtype: 'form',
items: [{
xtype: 'fieldset',
title: 'Select a Value',
items: [{
xtype: 'select',
id: 'wellsList',
name: 'wellsList',
options: [{
text: "1",
value: "1"
}]
}]
}, {
xtype: 'button',
text: 'Submit',
maxHeight: '40',
ui: 'round',
handler: getWellData
}]
}, {
xtype: 'carousel',
id: 'carousel'
}]
});
}
});

achapman
5 Aug 2010, 5:25 AM
Thanks for the help. Looks like this will work.