Nested List view to show other - extjs

Question

Here my code for showing list using sencha. When i click any any row how to make visible Detailed view.I have tried following link Sencha nested list way but no response.
List View
var tab= Ext.create('Ext.List', {
width: 320,
height: 320,
store: {
fields: ['ext_xtype','imgURL','arimg'],
data: [{
ext_xtype: 'Harry Potter 4',
imgURL:'bo.png',
arimg:'arrow.png'
},{
ext_xtype: 'Iphone5 64gb',
imgURL:'mo.png',
arimg:'arrow.png'
},{
ext_xtype: 'Hill Figure',
imgURL:'wa.png',
arimg:'arrow.png'
}]
},
itemTpl: '<img src="{imgURL}" width="35" heigh="35"></img><span>&nbsp&nbsp&nbsp{ext_xtype}<img src="{arimg}" width="25" height="25" align="right"></img>'
});
Detailed View
var sprfolievu = {
standardSubmit : false,
items: [{
xtype: 'fieldset',
title: '',
items: [
{
xtype: 'container',
layout: 'vbox',
title: '',
items: [{
xtype: 'container',
items: [{
xtype: 'container',
margin: 10,
layout: 'hbox',
items: [logo,{
xtype: 'label',
html: '&nbsp&nbsp&nbsp'
}
]
},]
},tablevuu ]
}
]
}]
}
Whats problem with my code?Please help me to sort it out

Answer 1

Your not following MVC, so code always looks ugly.
Learn about listeners and events
I have done some modification to sprfolievuand and added back button.
var sprfolievu = {
standardSubmit : false,
items: [{
xtype : 'toolbar',
items : [{
ui : 'back',
text : 'back',
handler : function(){
Ext.Viewport.setActiveItem(list);
}
}],
},{
xtype: 'fieldset',
title: '',
items: [{
xtype: 'container',
layout: 'vbox',
title: '',
items: [{
xtype: 'container',
items: [{
xtype: 'container',
margin: 10,
layout: 'hbox',
items: [{
xtype: 'label',
html: '&nbsp&nbsp&nbsp'
}]
}]
}]
}]
}]
};
Also done some changes in list.
var list = Ext.create('Ext.List', {
store: {
fields: ['ext_xtype','imgURL','arimg'],
data: [{
ext_xtype: 'Harry Potter 4',
imgURL:'bo.png',
arimg:'arrow.png'
},{
ext_xtype: 'Iphone5 64gb',
imgURL:'mo.png',
arimg:'arrow.png'
},{
ext_xtype: 'Hill Figure',
imgURL:'wa.png',
arimg:'arrow.png'
}]
},
itemTpl: ['<img src="{imgURL}" width="25" heigh="25">'+
'</img><span>{ext_xtype}</span>'+
'<img src="{arimg}" width="25" height="25" align="right"></img>'].join(),
listeners : {
itemtap: function(list, index, target, record, e, eOpts ) {
Ext.Viewport.setActiveItem(sprfolievu);
}
}
});
Ext.Viewport.add(list);
Ext.Viewport.add(sprfolievu);