Add/remove or show/hide options in tabbar

Discontinued products DHTMLX Touch
#1

Hi guys,

I cannot seem to find a way to show/hide or add/remove tab bar options. We have implemented a tabbar solution similiar to docs.dhtmlx.com/touch/doku.php?id=multiview but we need to be able to dynamically change the tabbar options, or even just hide/disable them.

This is the structure

{ view:‘tabbar’, multiview:true, batch:‘batch2’,id:‘maintabbar’,
options: [
{ view:“label”, label:‘Home’, src: ‘icons/home.png’, srcSelected: ‘icons/home.png’, value: ‘hometab’, id: ‘hometab’},
{ view:“label”, label:‘Details’, src: ‘icons/me.png’, srcSelected: ‘icons/me.png’, value: ‘staffdetails’, id: “staffdetails”},
{ view:“label”, label:‘Jobs’,src: ‘icons/toolbox_sm.png’, srcSelected: ‘icons/toolbox_sm.png’, value: ‘jobstab’, id: ‘jobstab’},
{ view:“label”, label:‘Payments’,src: ‘icons/eurosy.png’, srcSelected: ‘icons/eurosy.png’, value: ‘wagestab’, id: ‘wagestab’},
{ view:“label”, label:‘Avail’,src: ‘icons/calendar.png’, srcSelected: ‘icons/calendar.png’, value: ‘availtab’, id: ‘availtab’}
]
}

the code $$(‘availtab’).hide(); does not work?

any ideas

thanks
Cyril.

#2

Hi,

it is impossible to hide/show options of tabbar. You can create several tabbar buttons with different sets of options. And hide/show tabbar buttons.

#3

Hi Alexandra,

yes but however we have linked the tabbar options to views to create a full tab implementation as per your example - docs.dhtmlx.com/touch/doku.php?i … ent_tabbar

So here we have the tab bar:
{ view:‘tabbar’, multiview:true, batch:‘batch2’,id:‘maintabbar’,
options: [
{ view:“label”, label:‘Home’, src: ‘icons/home.png’, srcSelected: ‘icons/home.png’, value: ‘hometab’, id: ‘hometab’},
{ view:“label”, label:‘Details’, src: ‘icons/me.png’, srcSelected: ‘icons/me.png’, value: ‘staffdetails’, id: “staffdetails”},
{ view:“label”, label:‘Jobs’,src: ‘icons/toolbox_sm.png’, srcSelected: ‘icons/toolbox_sm.png’, value: ‘jobstab’, id: ‘jobstab’} ]
}

and then a view for each option (‘hometab’, ‘staffdetails’, ‘jobstab’)

we also have a tab bar option :

{ view:“label”, label:‘Avail’,src: ‘icons/calendar.png’, srcSelected: ‘icons/calendar.png’, value: ‘availtab’, id: ‘availtab’}

which we only wish to show if this option is enabled on the server side. So following your instructions we can create another tab bar with the 4 options instead of 3, but if we do so (we keep the same id names for the options) then when we wish to show a view for instance

$$(“hometab”).attachEvent(“onAfterSelect”,function(id){
$$(id).show();
$$(‘maintoolbar’).showBatch(“batch2”);
$$(“maintabbar”).setValue(id);
})

this results in both tabbars being shown again! Perhaps you can clarify the solution some more or show a short example.

thanks
Cyril.

#4

Hi,

You can also redefine options array in button config:

$$(“maintabbar”).define(“options”, [
{ view:“label”, label:‘Home’, src: ‘icons/home.png’, srcSelected: ‘icons/home.png’, value: ‘hometab’, id: ‘hometab’},
{ view:“label”, label:‘Details’, src: ‘icons/me.png’, srcSelected: ‘icons/me.png’, value: ‘staffdetails’, id: “staffdetails”},
{ view:“label”, label:‘Jobs’,src: ‘icons/toolbox_sm.png’, srcSelected: ‘icons/toolbox_sm.png’, value: ‘jobstab’, id: ‘jobstab’} ]);

$$(“maintabbar”).render();

This approach can be used for both “segmented” and “tabbar” views.