-
4 Oct 2010 10:33 PM #1Sencha User
- Join Date
- Aug 2010
- Location
- Europa
- Posts
- 216
- Vote Rating
- 1
[OPEN-392] 0.96 Carousel broken
[OPEN-392] 0.96 Carousel broken
I use a store of 16 records to generate a carousel. In each card of the carousel are an image, a list and several buttons. The content of the list switches depending on which card is shown (filtering). I added a listener to the carousel to register when the card is switched (to update the filtering of the list). But since 0.96 this doesn't register sometimes. Also I added an extra, blank card so that I can switch from the last card generated from the store to the first card. With 0.96 the last card generated from the store doesn't show most of the time.
Has there been any significant changes to the carousel from 0.95 to 0.96?
-
5 Oct 2010 9:46 AM #2Sencha - GXT Dev Team
- Join Date
- Aug 2010
- Posts
- 534
- Vote Rating
- 3
Thanks for the bug report.
-
5 Oct 2010 10:10 PM #3Sencha - Ext JS Dev Team
- Join Date
- Apr 2007
- Location
- Sydney, Australia
- Posts
- 15,087
- Vote Rating
- 97
Please post a test case, it's not really possible to comment without it.
Evan Trimboli
Sencha Developer
Twitter - @evantrimboli
Don't be afraid of the source code!
-
6 Oct 2010 1:33 AM #4Sencha User
- Join Date
- Aug 2010
- Location
- Europa
- Posts
- 216
- Vote Rating
- 1
The idea behind the carousel is to provide the user with an interface with which he can register damage to parts of a car (1.jpg). I have added an empty card in the end (for an loop in the carousel). First the user gets an image of a car (eventually the idea is the user can tap an area on the image, and that the app will calculate which part the user tapped). Then he gets a carousel, with a card for each part. For each part he can register the kind of damage, which is added to the list (2.jpg and 3.jpg). But the list filters based on which card/part is shown (cardswitch listener). Now the carousel sometimes doesn't register when cards are switched. Also the carousel switches cards sometimes with a single tap, not with a swipe. And finally, the last part isn't shown sometimes (just blank).PHP Code://Inspection page 5
(function() {
var cc = 1;
function removeFromList(row){
stateStore.removeAt(stateStore.findExact('id',row.get('stateId')));
stateStore.sync();
console.log('state deleted');
inspection.ComponentsDamageStore.remove(row);
}
function addDamage(type, component, accountable) {
com = inspection.ComponentStore.findRecord('id',cc);
check = false;
damageStore.each(function(rec){
if(rec.get('orderid') == selectedCar.get('orderid')){
if(rec.get('damageId') == com.get('damageId')){
damage = rec;
check = true;
}
}
});
if(type == "No Damage"){
if(check == true){
//remove all other damages to the component
stateStore.each(function(rec){
if(rec.get('orderid') == selectedCar.get('orderid')){
if(rec.get('damageId') == damage.get('id')){
row = inspection.ComponentsDamageStore.findRecord('stateId', rec.get('id'));
inspection.ComponentsDamageStore.remove(row);
stateStore.remove(rec);
}
}
});
damageStore.remove(damage);
stateStore.sync();
damageStore.sync();
}
}else{
if(check == false){
//new damage
damageStore.add({
orderid : selectedCar.get('orderid'),
damageId: com.get('damageId'),
description : com.get('name')
});
damageStore.sync();
damage = damageStore.getAt(damageStore.getCount() - 1);
}
if(type == "Lost"){
stateStore.each(function(rec){
if(rec.get('damageId') == damage.get('id')){
row = inspection.ComponentsDamageStore.findRecord('stateId', rec.get('id'));
inspection.ComponentsDamageStore.remove(row);
stateStore.remove(rec);
}
});
}
stateStore.add({
orderid : selectedCar.get('orderid'),
damageId: damage.get('id'),
type: type,
accountable: accountable
});
stateStore.sync();
if(accountable == true){
type = type + ' (A)';
}else{
type = type + ' (NA)';
}
inspection.ComponentsDamageStore.add( {
componentId : component,
stateId : (stateStore.getAt(stateStore.getCount() - 1)).get('id'),
typeDamage : type,
severity : ''
});
}
setCarDirty();
}
function changePanel(index) {
inspection.ComponentsDamageStore.clearFilter(true);
inspection.ComponentsDamageStore.filter( {
property : 'componentId',
value : (index),
exactMatch : true,
caseSensitive : false
});
cc = index;
}
function hideImage() {
if (img != undefined && selectedCard == 0) {
img.setSize('0px', '0px');
}
}
function showImage() {
if (img == undefined && selectedCard == 0) {
img = Ext
.getBody()
.createChild(
{
tag : 'img',
id : 'page5Image',
name : 'page5Image',
src : 'resources/img/ubench/carDamage.jpg',
style : 'width: 504px; height: 360px;position: absolute; top:40px; left:300px;',
VISIBILITY : 1,
DSIPLAY : 2
});
img.on('tap',
function(e) {
selectComponent((e.pageX - img.getX()), (e.pageY - img
.getY()));
});
} else if (selectedCard == 0) {
img.setSize('504px', '360px');
}
}
inspection.ComponentStore = new Ext.data.Store( {
model : 'BodyworkComponents',
sorters : 'id',
getGroupString : function(record) {
return record.get('name')[0];
},
data : [ {
name : 'Front Panel',
id : 1,
image : 'resources/img/ubench/car_sections/fr_pn.gif',
x : 0,
y : 0,
width : 0,
height : 0,
damageId: 'FRONT'
}, {
name : 'Front Bumper',
id : 2,
image : 'resources/img/ubench/car_sections/fr_bm.gif',
x : 0,
y : 0,
width : 0,
height : 0,
damageId: 'FRONT_BUMPER'
}, {
name : 'Front Hood',
id : 3,
image : 'resources/img/ubench/car_sections/fr_hd.gif',
x : 0,
y : 0,
width : 0,
height : 0,
damageId: 'FRONT_HOOD'
}]
});
inspection.ComponentsDamageStore = new Ext.data.Store( {
model : 'ComponentsDamage',
sorters : 'id',
getGroupString : function(record) {
return record.get('typeDamage');
},
data : []
});
var img;
var pict = false;
var selectedCard = 0;
function selectComponent(coorX, coorY) {
console.log(coorX + ' ' + coorY);
// calculated which part is selected
inspection.page5.setCard(1);
}
inspection.page5 = new Ext.Carousel(
{
style : 'background:#F9F9F9',
id : 'inspection.page5',
indicator : false,
layout : {
type : 'card',
visible : true,
align : 'left'
},
listeners : {
hide : function() {
hideImage();
pict = true;
},
beforeshow : function() {
inspection.page5.setCard(0);
showImage();
pict = false;
},
beforecardswitch : function(carousel, newCard, oldCard,
index, anim) {
if (cc == 0) {
hideImage();
}
},
cardswitch : function(carousel, newCard, oldCard, index,
anim) {
var check = false;
if (index == 0 && (!pict)) {
inspection.page5.setCard(inspection.ComponentStore.getCount(), {type: 'slide',direction:'right'});
check = true;
}
if (index > inspection.ComponentStore.getCount()) {
inspection.page5.setCard(1, {type: 'slide',direction:'left'});
check = true;
}
changePanel(index);
if (pict) {
pict == false;
}
if(check){
//return false;
}
},
afterrender : function() {
inspection.ComponentStore
.each(function(rec) {
var card = new Ext.Panel(
{
id : 'inspection.Component'
+ rec.get('id'),
layout : {
type : 'card'
},
items : [ {
xtype : 'panel',
title : rec.get('name'),
layout : {
type : 'hbox',
align : 'left'
},
items : [{
xtype : 'fieldset',
layout : {
type : 'vbox',
align : 'left'
},
width: 300,
items : [
{
id : 'inspection.Component.Image'+ rec.get('id'),
name : 'image',
styleHtmlContent : true,
html : '<img name="page5Image'
+ rec.get('id')
+ '" src="'
+ rec.get('image')
+ '" alt="some_text" width="192", height="64"/> ',
width : 192,
heigth : 64
},
{
width : 300,
height : 600,
align : 'bottom',
xtype : 'list',
pinHeaders : true,
deferEmptyText : true,
id : 'inspection.ComponentsDamageList'+ rec.get('id'),
listeners : {
itemtap : function(view,index,row,e) {
removeFromList(this.getRecord(row));
}
},
loadingText : 'Loading',
store : inspection.ComponentsDamageStore,
tpl : '<tpl for="."><div class="damage"><strong>{typeDamage}</strong></div></tpl>',
itemSelector : 'div.damage',
singleSelect : true,
grouped : false,
indexBar : false
} ]
},
{
xtype : 'panel',
layout : {
type : 'hbox',
align : 'left'
},
width : 500,
items : [{
xtype : 'fieldset',
layout : {
type : 'vbox',
align : 'left'
},
width: 220,
title : 'Register damage - Accountable',
defaults : {
xtype : 'button',
cls : 'demobtn',
ui : 'decline-round',
width: 180,
height: 55,
layout:{
align: 'left'
},
listeners : {
tap : function(but,e) {
addDamage(but.getText(),(cc),true);
}
}
},
items : [
{
text : 'Dent'
},
{
text : 'Scratch'
},
{
text : 'Multiple Damage'
},
{
text : 'Lost'
},
{
text : 'No Damage'
} ]
}, {
xtype : 'fieldset',
layout : {
type : 'vbox',
align : 'right'
},
width: 220,
title : 'Register damage - Not Accountable',
defaults : {
xtype : 'button',
cls : 'demobtn',
ui : 'round',
width: 180,
height: 55,
layout:{
align: 'right'
},
listeners : {
tap : function(
but,
e) {
addDamage(
but
.getText(),
(cc),false);
}
}
},
items : [
{
text : 'Dent'
},
{
text : 'Scratch'
},
{
text : 'Multiple Damage'
},
{
text : 'Lost'
}]
}]
} ]
} ]
});
Ext.getCmp('inspection.page5').add(card);
});
card = new Ext.Panel( {
id : 'inspection.ComponentLast',
layout : {
type : 'card'
}
});
Ext.getCmp('inspection.page5').add(card);
Ext.getCmp('inspection.page5').doLayout();
changePanel(cc - 1);
}
},
items : [ {
xtype : 'panel',
id : 'page5Panel1',
index : 0,
visible : true,
//autoHeight : true,
items : [ {
xtype : 'component',
style : 'width: 504px; height: 360px;',
listeners : {
afterrender : function() {
}
}
} ]
} ]
});
Could all this be caused that the carousel hasn't been fully constructed when I start using it?
-
6 Oct 2010 1:34 AM #5Sencha - Ext JS Dev Team
- Join Date
- Apr 2007
- Location
- Sydney, Australia
- Posts
- 15,087
- Vote Rating
- 97
It's difficult to say from that, there's a lot of code there. I'd suggest trying to distil it down to only the essential bits.
Evan Trimboli
Sencha Developer
Twitter - @evantrimboli
Don't be afraid of the source code!
-
6 Oct 2010 1:45 AM #6Sencha User
- Join Date
- Aug 2010
- Location
- Europa
- Posts
- 216
- Vote Rating
- 1
Is this short enough?
PHP Code://Inspection page 5
(function() {
var cc = 1;
var img;
var pict = false;
var selectedCard = 0;
function selectComponent(coorX, coorY) {
console.log(coorX + ' ' + coorY);
// calculated which part is selected
inspection.page5.setCard(1);
}
function changePanel(index) {
inspection.ComponentsDamageStore.clearFilter(true);
inspection.ComponentsDamageStore.filter( {
property : 'componentId',
value : (index),
exactMatch : true,
caseSensitive : false
});
cc = index;
}
inspection.ComponentStore = new Ext.data.Store( {
model : 'BodyworkComponents',
sorters : 'id',
getGroupString : function(record) {
return record.get('name')[0];
},
data : [ {
name : 'Front Panel',
id : 1,
image : 'resources/img/ubench/car_sections/fr_pn.gif',
x : 0,
y : 0,
width : 0,
height : 0,
damageId: 'FRONT'
}, {
name : 'Front Bumper',
id : 2,
image : 'resources/img/ubench/car_sections/fr_bm.gif',
x : 0,
y : 0,
width : 0,
height : 0,
damageId: 'FRONT_BUMPER'
}, {
name : 'Front Hood',
id : 3,
image : 'resources/img/ubench/car_sections/fr_hd.gif',
x : 0,
y : 0,
width : 0,
height : 0,
damageId: 'FRONT_HOOD'
}]
});
inspection.ComponentsDamageStore = new Ext.data.Store( {
model : 'ComponentsDamage',
sorters : 'id',
getGroupString : function(record) {
return record.get('typeDamage');
},
data : []
});
inspection.page5 = new Ext.Carousel(
{
id : 'inspection.page5',
indicator : false,
layout : {
type : 'card',
visible : true,
align : 'left'
},
listeners : {
hide : function() {
hideImage();
pict = true;
},
beforeshow : function() {
inspection.page5.setCard(0);
showImage();
pict = false;
},
beforecardswitch : function(carousel, newCard, oldCard,
index, anim) {
if (cc == 0) {
hideImage();
}
},
cardswitch : function(carousel, newCard, oldCard, index,
anim) {
var check = false;
if (index == 0 && (!pict)) {
inspection.page5.setCard(inspection.ComponentStore.getCount(), {type: 'slide',direction:'right'});
check = true;
}
if (index > inspection.ComponentStore.getCount()) {
inspection.page5.setCard(1, {type: 'slide',direction:'left'});
check = true;
}
changePanel(index);
if (pict) {
pict == false;
}
},
afterrender : function() {
inspection.ComponentStore
.each(function(rec) {
var card = new Ext.Panel(
{id : 'inspection.Component'
+ rec.get('id'),
layout : {
type : 'card'
},
items : [ {
xtype : 'panel',
title : rec.get('name'),
layout : {
type : 'hbox',
align : 'left'
},
items : [{
xtype : 'fieldset',
layout : {
type : 'vbox',
align : 'left'
},
width: 300,
items : [
{
id : 'inspection.Component.Image'+ rec.get('id'),
name : 'image',
styleHtmlContent : true,
html : '<img name="page5Image'+ rec.get('id')+ '" src="'+ rec.get('image')+ '" alt="some_text" width="192", height="64"/> ',
width : 192,
heigth : 64
},
{
width : 300,
height : 600,
align : 'bottom',
xtype : 'list',
pinHeaders : true,
deferEmptyText : true,
id : 'inspection.ComponentsDamageList'+ rec.get('id'),
listeners : {
itemtap : function(view,index,row,e) {
removeFromList(this.getRecord(row));
}
},
loadingText : 'Loading',
store : inspection.ComponentsDamageStore,
tpl : '<tpl for="."><div class="damage"><strong>{typeDamage}</strong></div></tpl>',
itemSelector : 'div.damage',
singleSelect : true,
grouped : false,
indexBar : false
} ]
}]
}]
} ]
});
Ext.getCmp('inspection.page5').add(card);
});
card = new Ext.Panel( {
id : 'inspection.ComponentLast',
layout : {
type : 'card'
}
});
Ext.getCmp('inspection.page5').add(card);
Ext.getCmp('inspection.page5').doLayout();
changePanel(cc - 1);
}
},
items : [ {
xtype : 'panel',
id : 'page5Panel1',
index : 0,
visible : true,
items : [ {
xtype : 'component',
style : 'width: 504px; height: 360px;'
} ]
} ]
});
-
6 Oct 2010 8:42 AM #7Ext User
- Join Date
- Sep 2010
- Posts
- 25
- Vote Rating
- 0
My carousel also broke when moving to .96, reverted back to .93 for now.
Thank you for reporting this bug. We will make it our priority to review this report.
Reply With Quote
Similar Threads
-
[OPEN-327] List with carousel
By gmanraj in forum Sencha Touch 1.x: BugsReplies: 8Last Post: 29 Nov 2010, 8:22 PM -
[FIXED-377] 0.96 Carousel switching sections bug
By krzepa in forum Sencha Touch 1.x: BugsReplies: 1Last Post: 1 Oct 2010, 10:43 AM -
[OPEN-1285] Vertical slider broken
By steffenk in forum Ext 3.x: BugsReplies: 2Last Post: 21 Sep 2010, 8:39 AM -
[FIXED-392][3.0.3] Ext.isIterable handles wrong empty IXMLDOMNodeList in IE
By zvi in forum Ext 3.x: BugsReplies: 7Last Post: 16 Dec 2009, 8:49 PM -
[OPEN-307]Dynamic localization example is broken
By stephen.friedrich in forum Ext 3.x: BugsReplies: 3Last Post: 30 Sep 2009, 5:15 AM