NavBar problem (Navigation view, Tab Panel and item tap on list)
I'm struggling with the nav bar and it's driving me crazy for weeks....
For now, I'm stuck with the navbar on first view, I don't want it there, but if not, I'll not have the back button on the second view. And if I get this back button on the second view, I'll end with 3 nav bars ont the third view !!!! I need a recursive nav bar.
see example here : http://www.sciences-physiques.eu/app...ewtab/testing/
code in there : http://dl.free.fr/pCTBTNkNp
I tried with this code (thanks to Nikolaj Borisik) (example here : http://www.sciences-physiques.eu/appli/navpush/ )
Code:
Ext.define('navpush.view.Main', {
extend: 'Ext.navigation.View',
config: {
ui: 'light',
autoDestroy: false
},
constructor : function(){
this.callParent(arguments);
this.firstTabPanel = Ext.create('Ext.tab.Panel',{
title: 'MyTabPanel1',
layout: {
animation: 'fade',
type: 'card'
},
items: [
{
xtype: 'container',
title: 'Tab 1',
iconCls: 'info',
html : 'TAB 1'
},
{
xtype: 'container',
title: 'Tab 2',
iconCls: 'info',
html : 'TAB 2'
},
{
xtype: 'list',
title: 'Tab 3',
iconCls: 'info',
html : 'TAB 3',
store: {
fields: ['name'],
data: [
{name: '1st item'},
{name: '2nd item'}
]
},
onItemDisclosure: true,
itemTpl: '{name}',
listeners: {
itemtap: function (view, index, target, record, evt) {
if(index==0){
var x = 1;
}
else if(index==1){
var x = 2;
}
}
}
}
],
tabBar: {
docked: 'bottom'
}
});
this.secondTabPanel = Ext.create('Ext.tab.Panel',{
title: 'MyTabPanel2',
items: [
{
xtype: 'container',
title: 'Tab 4',
iconCls: 'info',
html : 'TAB 4'
},
{
xtype: 'container',
title: 'Tab 5',
iconCls: 'info',
html : 'TAB 5'
},
{
xtype: 'container',
title: 'Tab 6',
iconCls: 'info',
html : 'TAB 6'
}
],
tabBar: {
docked: 'bottom'
}
});
this.thirdTabPanel = Ext.create('Ext.tab.Panel',{
title: 'MyTabPanel3',
items: [
{
xtype: 'container',
title: 'Tab 7',
iconCls: 'info',
html : 'TAB 7'
},
{
xtype: 'container',
title: 'Tab 8',
iconCls: 'info',
html : 'TAB 8'
},
{
xtype: 'container',
title: 'Tab 9',
iconCls: 'info',
html : 'TAB 9'
}
],
tabBar: {
docked: 'bottom'
}
});
this.firstTabPanel.on('activeitemchange', this.tabPanel1ActiveItemChange, this);
//show first tab panel
this.push(this.firstTabPanel);
},
tabPanel1ActiveItemChange : function(tabpanel, newtab){
//if newtab is third tab than show second tab panel
if(this.firstTabPanel.getInnerItems().indexOf(newtab)=== 1){
this.push(this.secondTabPanel);
}
}
});
but it seems a little bit complicated.
what am I doing wrong with those multiple nav bars ? HOw can I easily manage those bars ?
thanks
PS : yous should see a strange image on the first view. I don't know why but chrome has difficulties to display this svg
