Question to Cards of Kitchen Sink/ Events Example

[msinn]

Hello everybody,

you have the Example Events in your Kitchen Sink.
When I klick first time on Events it shows me on iPhone the card infoCard first. When i click on its Button Console, the second card, the touchCard with its items is shown. Everything is fine, but when I go back to Events an try it again, the first card infoCard will be skipped. What should I change in order to avoid this?



demos.TouchImpl = Ext.extend(Ext.Panel, {
initComponent : function() {
this.logger = new Ext.Panel({
id: 'logger',
scroll: 'vertical',
styleHtmlContent: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Event Log',
ui: 'metal'
}],
html: '<span>Try using gestures on the area to the right to see how events are fired.</span>'
});

this.info = new Ext.Component({
xtype: 'component',
styleHtmlContent: true,
scroll: 'vertical',
html: '<p>Sencha Touch comes with a multitude of touch events available on components. Included touch events that can be used are:</p><ul><li>touchstart</li><li>touchmove</li><li>touchend</li><li>scrollstart</li><li>scroll</li><li>scrollend</li><li>tap</li><li>doubletap</li><li>taphold</li><li>swipe</li><li>pinch</li></ul>'
});

this.touchPad = new demos.TouchImpl.TouchPad({
listeners: {
log: this.onLog,
scope: this
}
});

if (!Ext.platform.isPhone) {
this.layout = 'fit';
this.logger.flex = 1;
this.info.flex = 1.5;

this.dockedItems = [{
dock: 'left',
width: 250,
id: 'touchinfopanel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [this.info, this.logger]
}];
this.items = [this.touchPad];
}
else {
this.layout = 'card';
this.logger.flex = 1;
this.touchPad.flex = 1;

this.infoCard = new Ext.Container({
scroll: 'vertical',
items: [{
xtype: 'button',
ui: 'action',
text: 'Console',
style: 'margin: 10px;',
handler: this.onConsoleButtonTap,
scope: this
}, {
xtype: 'component',
styleHtmlContent: true,
html: '<p>Sencha Touch comes with a multitude of touch events available on components. Included touch events that can be used are:</p><ul><li>touchstart</li><li>touchmove</li><li>touchend</li><li>scrollstart</li><li>scroll</li><li>scrollend</li><li>tap</li><li>doubletap</li><li>taphold</li><li>swipe</li><li>pinch</li></ul>'
}]
});

this.touchCard = new Ext.Container({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [this.touchPad, this.logger]
});

this.items = [this.infoCard, this.touchCard];
}

demos.TouchImpl.superclass.initComponent.call(this);
},

onConsoleButtonTap : function() {
this.setCard(this.touchCard, 'slide');
},

onLog : function(type, e) {
var loggerEl = this.logger.body;
if (!this.started) {
loggerEl.select('span').remove();
this.started = true;
}

switch (type) {
default:
loggerEl.first().insertFirst({
tag: 'p',
html: type,
style: 'margin: 0'
});
loggerEl.select('p:nth-child(50)').remove();
break;
}
}
});

demos.TouchImpl.TouchPad = Ext.extend(Ext.Component, {
id: 'touchpad',
html: 'Touch here!',

initComponent : function() {
this.addEvents('log');
demos.TouchImpl.TouchPad.superclass.initComponent.call(this);
},

afterRender: function() {
demos.TouchImpl.TouchPad.superclass.afterRender.call(this);

this.mon(this.el, {
touchstart: this.handleEvent,
touchend: this.handleEvent,
touchmove: this.handleEvent,
scrollstart: this.handleEvent,
scroll: this.handleEvent,
scrollend: this.handleEvent,
tap: this.handleEvent,
doubletap: this.handleEvent,
taphold: this.handleEvent,
tapcancel: this.handleEvent,
swipe: this.handleEvent,
pinch: this.handleEvent,
scope: this
});
},

handleEvent: function(e) {
this.fireEvent('log', e.type, e);
}
});

demos.Touch = new demos.TouchImpl();
Every answer will be apreciated, THX
Marius

[msinn]

Hello Forum,

maybe somebody has changed this in the mean time and have an asnwer for my question, THX.

Marius

[nosarious]

it's not 'skipping' the first card, it's remembering where you were when you left the carousel page.

For many people this is what you want, not always having to revisit the first card. For others, having it automatically return to the beginning may be required. For others a popup allowing them to choose beginning or where they left off may be necessary.

You can do a search in the forum for how to set the active item for the carousel so it starts on a particular slide. try this post for a possible answer:

http://www.sencha.com/forum/showthread.php?103457-Carousel-starting-from-a-middle-item&highlight=carousel