Sencha Touch toolbar duplicating - extjs

Question

I'm new with Sencha Touch 2 and I've got a trouble using nested list:
toolbar duplicates along with back button, so at the end of nested list I have 3 toolbars with 3 back buttons. I guess that the reason is that I create Ext.nestedList for each detailed card, useToolbar:false doesn't fix the problem because then I can't go to previous list. Maybe back button needs to be overwritten but I've got no idea of that. Any help would be very useful. Here is top part of code:
Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: ['text'],
},
});
var treeStore = Ext.create("Ext.NestedList", {
fullscreen: true,
tabBarPosition: 'bottom',
title: 'Now-Yakutsk',
iconCls: 'star',
displayField: 'title',
layout: 'card',
store: {
type: 'tree',
id: 'ListCard',
fields: [
'title','code',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'http://now/catlist.php',
reader: {
type: 'json',
rootProperty: 'cat'
}
}
},
listeners: {
leafitemtap: function(nestedList, list, index, target, record) {
var treeStore2 = Ext.create("Ext.NestedList", {
fullscreen: true,
tabBarPosition: 'bottom',
//useToolbar:false,
//leaf: true ,
iconCls: 'star',
displayField: 'title',
store: {
type: 'tree',
id: 'detailCard',
fields: [
'title','code','link',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'http://now/catlist2.php',
reader: {
type: 'json',
rootProperty: 'cat'
}
}
},
detailCard: { useToolbar:true,
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
leafitemtap: function(nestedList, list, index, target, record) {
var cin = Ext.create("Ext.NestedList", {
fullscreen: true,
tabBarPosition: 'bottom',
//useToolbar:false,
//title: 'Blog',
iconCls: 'star',
displayField: 'list',
store: {
type: 'tree',
fields: [
'name', 'link', 'list', 'image', 'adress', 'banner',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'http://now/cinemalist.php',
reader: {
type: 'json',
rootProperty: 'cinema'
}
}
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
leafitemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('banner'));
}
}
});
and the screenshot:
http://piccy.info/view3/4985552/cdfd1dcca3928d4a5d4b4b41ba060b1f/

Answer 1

found solution in case someone else has the same problem
-the point is hiding and showing the toolbar playing with active deactive methods
for example in parent we create
listeners: { activate : function() {
//this.getToolbar().hide();
tb = this.getToolbar();
} ,
deactivate: function() {
//this.getToolbar().hide();
}
then in child we put
listeners: {
activate : function() {
tb1 = this.getToolbar();
tb1.hide();
tb.show();
//this.getToolbar().hide();
} ,
deactivate: function() {
//tb.show();
//alert('dd');
//this.getToolbar().hide();
}
and so on ...