PDA

View Full Version : List setActiveItem error: Cannot read property 'isComponent' of undefined?



simondavies
26 Sep 2011, 12:59 PM
I have the following code set up:


var detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Hello',
layout: 'card'
});

var listPanel = new Ext.List({
id: 'indexlist',
store: 'showStore',
itemTpl: App.views.showlistTpl,
grouped: true,
layout:'card',
onItemDisclosure: function(record, btn, index) {
detailPanel.update(record.data);
App.viewport.setActiveItem('detailPanel', {type: 'slide', direction: 'left'});
}
});




App.views.showList = Ext.extend(Ext.Panel, {
scroll: 'vertical',
styleHtmlContent: false,
dockedItems: [{
xtype: 'toolbar',
title: 'My List'
}],
items: [listPanel, detailPanel],
layout:'card'
});


Ext.reg('showList', App.views.showList);


The list shows all ok, but then when I click on the disclosure icon, I get the following error:

Uncaught TypeError: Cannot read property 'isComponent' of undefined

Been through everything but still cannot see whats wrong?

whats strange (when trying a few things) is when I change the layout of 'App.views.showList' to layout:'fit', then click on a disclosure icon, my detailed page displays over my list so I get the list and the detailed page view, so it looks like its not removing my list view....?

Many Thanks

simondavies
27 Sep 2011, 1:05 AM
Well this has been solves on another forum, and the solution was to:

omit the detailsPanel itme from the items:[listPanel, detailPanel]

then ref it here App.viewport.setActiveItem('detailPanel', not as an id but as the type

App.viewport.setActiveItem(detailPanel,.....

this seemed to have fix my error.

neoswf
22 Nov 2011, 2:03 PM
I have the same problem. I couldn't manage to implimant your solution.

If I may, that's my code:

Mobz.IngressoCardDetailPanel = new Ext.Panel({ id: 'ingressocarddetailpanel',
tpl: 'Hello, {data}!',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function () {
Mobz.views.viewport.setActiveItem('ingressohorarioslist', { type: 'slide', direction: 'right' });
}
}]
}
]});


Mobz.IngressoCardListPanel = new Ext.List({
id: 'ingressohorarioslist',
store: Mobz.IngressosDatas,
itemTpl: '<img src="{logo}" /> {cinema}{horarios}</div>',
grouped: true,
onItemDisclosure: function (record, btn, index) {
Mobz.IngressoCardDetailPanel.update(record.data);
Mobz.views.viewport.setActiveItem('ingressocarddetailpanel');
}
});


Mobz.views.Ingressocard = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [Mobz.IngressoCardListPanel, Mobz.IngressoCardDetailPanel]
});


Ext.reg('ingressocard', Mobz.views.Ingressocard);

I'm implimenting this tutorial - http://docs.sencha.com/touch/2-0/#!/video/19245335
T (http://docs.sencha.com/touch/2-0/#!/video/19245335)he group listing works totally fine, just clicking level inside doesn't...

Thanks for any help!!!
NeoSwf

simondavies
23 Nov 2011, 2:32 AM
Not a problem, are you able to post me the actual error your getting.

neoswf
23 Nov 2011, 4:53 AM
I have uploaded my proect to my ftp, to make it easy to understand and see the errors.

http://m.webdesign.org.il/Mobz/

Regarding the error. It's the same error: Cannot read property 'isComponent' of undefined as mentioned in the original question of this thread.
The relative code sits inside http://m.webdesign.org.il/Mobz/app/views/ingressocard.js, and to initiate it you have to go to the second tab at the bottom Ingressos, and than click one of the list items.
Than you'll see the grouped list, and clicking the right arrow will bring you the error.

I appreciate your help.
Shlomi.

p.s. - I know I have issues with the layout. I'm just focusing on each problem once at a time :)

simondavies
23 Nov 2011, 12:30 PM
i notice on this http://m.webdesign.org.il/Mobz/app/views/ingressocard.js that in the main layout you have


<b>items: [Mobz.IngressoCardListPanel, Mobz.IngressoCardDetailPanel]</b>


but do not require the Mobz.IngressoCardDetailPanel, just simply need


<b>items: [Mobz.IngressoCardListPanel] </b>


As the detailed view should be fired when clicked.


Also you are then having your back button goto id <b>'ingressohorarioslist'</b> but this should be the main list <b>'Mobz.views.Ingressocard'</b> so need to give this an id then point this to there


It's difficult to see as its written different to how I would but I have written to below how I do it, hope this helps



var detailedPanel = new Ext.Panel({
id: 'ingressocarddetailpanel',
scroll: 'vertical',
styleHtmlContent: true,
tpl: 'Hello, {data}!',
layout: 'card',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function () {
Mobz.views.viewport.setActiveItem('Ingressocard', { type: 'slide', direction: 'right' });
}
}]
}
]
});




var panelList = new Ext.List({
id: 'ingressohorarioslist',
styleHtmlContent: false,
store: Mobz.IngressosDatas,
itemTpl: '<div class="IngrsData"><img src="{logo}" /> <strong>{cinema}</strong> {horarios}</div>',
grouped: true,
onItemDisclosure: function (record, btn, index) {
detailedPanel.update(record.data);
App.viewport.setActiveItem(detailedPanel, {type: 'slide', direction: 'left'});
}
});




Mobz.views.Ingressocard = Ext.extend(Ext.Panel, {
id:'Ingressocard',
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [panelList]
});






Ext.reg('Ingressocard', Mobz.views.Ingressocard);


as you will see i am setting my list and detail panel as var's

hope this helps a little or more :-)

neoswf
24 Nov 2011, 5:30 AM
I'll try to implement that and return with results :)

Thank you!

neoswf
24 Nov 2011, 5:59 AM
But now I'm facing a new problem. The back button bring me back to the the first carousel screen.
I updates a little the files. Now I work only with the ingresso.js file. (not the card)

That's my up to date code

Mobz.views.IngressosDetails = new Ext.Panel({ id: 'ingressosdetails',
tpl: 'Ingresso {Name}',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Voltar',
ui: 'back',
handler: function () {
Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });
}
}]
}
]
});


Mobz.views.IngressosList = new Ext.List({
id: 'ingressoslist',
itemTpl: '<div class="IngrsLstItm"><img src="{Image}" /> {Name}</div>',
store: Mobz.ingressosstore,
onItemDisclosure: function (record, btn, index) {
Mobz.views.IngressosDetails.update(record.data);
Mobz.views.viewport.setActiveItem( Mobz.views.IngressosDetails, { type: 'slide', direction: 'left' });
}
});


Mobz.views.Ingressos = Ext.extend(Ext.Panel, {
id: "ingressos",
title: "Ingressos",
iconCls: "arrow_right",
styleHtmlContent: true,
cls: 'cards',
fullscreen: true,
layout: 'fit',
defaults: {
flex: 1
},
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Ingressos"
}],
items: [Mobz.views.IngressosList]
});
Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('ingressos', Mobz.views.Ingressos);

As you can see, I am calling Mobz.ingressos in the back action, but that brings me back to the carousel, and printing extra empty button at the bottom.

I guess that happening cause I configure my viewport wrongly. Can you please help me with that?