controller control sencha touch 2 doesnt work - list

Question

My controller seems that it doesnt work :
Controller:
Ext.define('MyApp2.controller.Details',{
extend : 'Ext.app.Controller',
config: {
refs:{
NewsContainer: 'NewsContainer'
},
control:{
'NewsContainer home list':{
itemtap: function(){
console.log("item");
}
}
}
}
});
Home :
Ext.define('MyApp2.view.Home', {
extend: 'Ext.Panel',
xtype: 'home',
requires: [
'Ext.tab.Panel',
'Ext.dataview.List',
'MyApp2.view.NewsContainer'
],
config: {
title: 'Home',
IconCls:'home',
styleHtmlCls:'details',
styleHtmlcontent:'true',
scrollable:true,
layout:'fit',
items: [
{
xtype: "list",
store: "NewsStore",
itemTpl: new Ext.XTemplate (
'<div>',
'<img src="{enclosure}" />',
'<h1>{title}</h1>',
'</div>'
),
itemCls:'news-entries'
}
]
}
});
NewsContainer:
Ext.define('MyApp2.view.NewsContainer', {
extend: 'Ext.NavigationView',
xtype: 'NewsContainer',
config: {
autoDestroy: false,
title: 'Home',
IconCls:'Home',
items: [
{
xtype:'home'
}
]
}
});
and here is my app.js:
Ext.application({
name: 'MyApp2',
requires: [
'Ext.MessageBox'
],
controller:['Details'],
models:['MyApp2.model.News'],
views: [
'Main','Home','News','NewsContainer','Details'
],
stores:['NewsStore'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('MyApp2.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
Can u tell me please what's wrong with my code ?there is no error in the console , nothing's happened when i tap :(

Answer 1

The problem is, that the controller doesn't find the reference to the list.
There is no error message, because the itemtap event from the list is not catched.
I think this controller code is going to work:
Ext.define('MyApp2.controller.Details',{
extend : 'Ext.app.Controller',
config: {
refs:{
homeList: 'home list'
},
control:{
homeList : {
itemtap : function(list, index, item, record) {
console.log("item");
}
}
}
}
});

Answer 2

Adding
itemId : list in the view
and in the controller the next line :
main : 'main , it´s enough for you...
Ext.define('MyApp2.controller.Details',{
extend : 'Ext.app.Controller',
config: {
refs:{
main : 'main',
homeList: 'main list'
},
control:{
homeList : {
itemtap : function(list, index, item, record) {
console.log("item");
}
}
}
}
});