PDA

View Full Version : Panel.getActiveItem not working



heanlim
5 Jan 2012, 9:25 AM
Sencha Touch version tested:

0.9 rev 1.1.1


sencha-touch.css used
Platform tested against:

iOS 3.x (iPad - very old version)
iOS 4 (iPhone 3GS)
Chrome 16.0.912.63 - for troubleshooting sake
Description:

Panel.getActiveItem() & Panel.setActiveItem(#) not working when integrated with Nestedlist.detailCard. It was working fine for the first time when one item was selected from list and slide to panel which allows users to navigate pictures/information by swiping left and right. Got back to items listing, select second item from list, slide left to panel (showing details/pictures of item#2), getActiveItem() started not working when swipe/tap/doubletap are used. Working only for 'click'
Error (from : Chrome's debugger)Uncaught TypeError: Cannot read property 'id' of null
detailCard.body.select.on.swipeindex.js:376
(anonymous function)
(anonymous function)sencha-touch.js:6
Ext.gesture.Gesture.Ext.extend.firesencha-touch.js:6
Ext.gesture.Swipe.Ext.extend.onTouchMovesencha-touch.js:6
Ext.gesture.Manager.Ext.AbstractManager.onTouchMovesencha-touch.js:6
(anonymous function)sencha-touch.js:6
sencha-touch.js:6


Uncaught TypeError: Cannot read property 'isComponent' of undefined
Ext.lib.Container.Ext.extend.createComponentsencha-touch.js:6
Ext.lib.Container.Ext.extend.lookupComponentsencha-touch.js:6
Ext.lib.Container.Ext.extend.prepareItemssencha-touch.js:6
Ext.lib.Container.Ext.extend.addsencha-touch.js:6
Ext.layout.CardLayout.Ext.extend.setActiveItemsencha-touch.js:6
Ext.Container.Ext.extend.setActiveItemsencha-touch.js:6
detailCard.body.select.on.tapindex.js:360
(anonymous function)
(anonymous function)sencha-touch.js:6
Ext.gesture.Gesture.Ext.extend.firesencha-touch.js:6
Ext.gesture.Tap.Ext.extend.fireTapEventsencha-touch.js:6
Ext.gesture.Tap.Ext.extend.onTouchEndsencha-touch.js:6
Ext.gesture.Manager.Ext.AbstractManager.onTouchEndsencha-touch.js:6
(anonymous function)
Test Case:
var nestedList = new Ext.NestedList({
title: 'bla',
fullscreen: true,
displayField: 'text',
getTitleTextTpl: function() {
return '{' + this.displayField + '}';
},
getItemTextTpl: function() {
return '{' + this.displayField + '}';
},
getDetailCard: function(recordNode, parentNode) {
var cxxxx = new Ext.data.Store({
model: 'Details',
proxy: {
type: 'ajax',
url: 'testa.php'
}
});


var formBase = {
scroll: 'vertical',
url: '#',
standardSubmit : false,
items: [{
xtype: 'fieldset',
title: '',
instructions: '',
defaults: {
required: false,
labelAlign: 'left',
labelWidth: '20%'
},
items: [
{
xtype: 'panel',
name : 'img',
html : 'XXXX'
}, {
xtype: 'textareafield',
name : 'summary',
label: '',
placeHolder: '?????',
disabled: true,
maxLength: 60,
maxRow: 20
}]
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'spacer'
}, {
text: 'Next',
ui: 'action',
handler: function() {
showDetails();
}
}]
}]
};


var listToolbar = new Ext.Toolbar({
title: '',
layout: 'hbox',
dock: 'bottom',
items: [{
xtype : 'spacer'
}, {
text : 'Next',
ui : 'action',
handler : function() {
detailCard.setActiveItem(0,{type: 'slide', direction: 'right'});
}
}]
});


var panelDetails = new Ext.Panel({
id : 'panelDetails',
layout : 'card',
dockedItems : [ listToolbar ],
items : [ listDetails ]
});


var listDetails = new Ext.List({
xtype : 'list',
fullscreen: false,
grouped : false,
scroll : 'vertical',
itemTpl : '<div class="list-item-title">{a}</div>' + '<div class="list-item-narrative">{b}</div>',
onItemDisclosure: function (r1) {
showPanel();
},
store : cxxxx
});


function load1(c) {
var cn = new Ext.Container({
id : c,
width : '100%',
height : '100%',
cls : 'card',
html : '<img src="loading.gif"/>'
});


detailCard.add(cn);
if (c==2) {
detailCard.setActiveItem(c);
}
}


var showPanel = function() {
//adding cards
load1(1);
load1(2);
load1(3);
load1(4);
detailCard.doLayout();
detailCard.body.select('img').on({
swipe: function(e, t) {
var cc = detailCard.getActiveItem().id;
detailCard.setActiveItem(cc);
},
scope: {
scale: 1
}
});
}


var showDetails = function() {
try {
detailCard.add(panelDetails);
detailCard.setActiveItem(1,{type: 'slide', direction: 'left'});
cxxxx.load();
} catch(e){console.log(e);}
};


var detailCard = new Ext.Panel({
id : 'images-view',
frame : true,
autoHeight : false,
title : '',
scroll : 'vertical',
layout : 'card',
cardAnimation : 'slide',
items : [ formBase ]
});
return detailCard;
},
store: store
});
See this URL : nilSteps to reproduce the problem:

Navigate the nestedlist with items
Select item#1 -> show details
Press 'Next' (bottom)
Navigate pictures, swipe left/right (OK)
Back to main list (use Nestedlist "Back" button)
Select item#2 -> show details
Repeat above action after the selection
Not working with swipe (even with a few pictures/cards)
Alter with tap, doubletap (not working)
The result that was expected:

Supposed to be able to swipe left/right for pictures scrolling (container/panel)
The result that occurs instead:

getActiveItem returning NULL when swipe is used (for the 2nd time)
Screenshot or Video:

nil
Debugging already done:

none
Possible fix:

nil, using click at the moment

mitchellsimoens
5 Jan 2012, 12:55 PM
Have you tried this in Sencha Touch 2? Development has been moved on to Sencha Touch 2.

heanlim
6 Jan 2012, 5:35 AM
Thanks. Just got 2.0 downloaded, I will try it out and let you know the outcome once I have it.

heanlim
13 Jan 2012, 10:45 AM
Was kinda busy with other projects last week, just got some time to look at this just now.

Quite a list of things to change to 2.0 - took me days

Anyway, just to update you about the outcome - tested with all mentioned platforms above.
It works fine with 2.0, thank you.
Found few things:
* 2.0 fixed nested list overlap back button with title.
* Scrolling has changed, especially with a docking bar
* Sliding animation not working for added panel, could be code change in 2.0, gotta find out later.

Again, thanks for your advice.