Toolbar with Tabbar

Suite and Optimus Suite 5
#1

How do I get multiple toolbars on the page with only one initialization. Right now I have 6 tabs in my tabbar and I want the toolbar to be at the top of each page but i have to call it like so:

var toolbar = new dhtmlXToolbarObject(“toolbarObj1”);
toolbar.setIconsPath("…/codebase/imgs/");
toolbar.setSkin(“dhx_skyblue”);
toolbar.addSeparator(“sep”, 1 );
toolbar.addButton(“print”, 3, “Print Documents”, “print.gif”, “print_dis.gif”);
toolbar.addButton(“email”, 2, “Send Message”, “email.png”, “email.png”);

var opts = [['id1', 'obj', 'New Opportunity', 'img1'],
                  ['sep01', 'sep', '', ''],
                  ['id2', 'obj', ' Opportunity Analysis', 'img2'],
				   ['sep02', 'sep', '', ''],
                  ['id3', 'obj', 'Pursuit Strategy & Approval', 'img3'],
				   ['sep03', 'sep', '', ''],
                  ['id4', 'obj', 'RFP or Supplier Selection', 'img4'],
				   ['sep04', 'sep', '', ''],
                  ['id5', 'obj', 'Contract Negotiations', 'img5'],
				   ['sep05', 'sep', '', ''],
                  ['id6', 'obj', 'In Approval Process', 'img6'],
				   ['sep06', 'sep', '', ''],
                  ['id7', 'obj', 'Implemented', 'img7'],
				   ['sep07', 'sep', '', ''],
                  ['id8', 'obj', 'Discontinued', 'img8']					  
				  ];				   
toolbar.addButtonSelect("select", 0, "Progress", opts, "cut.gif", "cut_dis.gif", "true", "true");
var toolbar = new dhtmlXToolbarObject("toolbarObj2");
toolbar.setIconsPath("../codebase/imgs/");
toolbar.setSkin("dhx_skyblue");
toolbar.addSeparator("sep", 1 );    
toolbar.addButton("print", 3, "Print Documents", "print.gif", "print_dis.gif");
toolbar.addButton("email", 2, "Send Message", "email.png", "email.png");

var opts = [['id1', 'obj', 'New Opportunity', 'img1'],
                  ['sep01', 'sep', '', ''],
                  ['id2', 'obj', ' Opportunity Analysis', 'img2'],
				   ['sep02', 'sep', '', ''],
                  ['id3', 'obj', 'Pursuit Strategy & Approval', 'img3'],
				   ['sep03', 'sep', '', ''],
                  ['id4', 'obj', 'RFP or Supplier Selection', 'img4'],
				   ['sep04', 'sep', '', ''],
                  ['id5', 'obj', 'Contract Negotiations', 'img5'],
				   ['sep05', 'sep', '', ''],
                  ['id6', 'obj', 'In Approval Process', 'img6'],
				   ['sep06', 'sep', '', ''],
                  ['id7', 'obj', 'Implemented', 'img7'],
				   ['sep07', 'sep', '', ''],
                  ['id8', 'obj', 'Discontinued', 'img8']					  
				  ];				   
toolbar.addButtonSelect("select", 0, "Progress", opts, "cut.gif", "cut_dis.gif", "true", "true");

Because it doesn’t work if I try to call toolbarObj1 more than once… So I have to call toolbarObj1, toolbarObj2, toolbarObj3.

This is very messy, long code, help!

#2

You can try the next approach. After init of the tabbar use the next code:

toolbars = {}; tabbar.attachEvent("onSelect", function(id){ if (!toolbars[id]){ var toolbar = tabbar.cells(id).attachToolbar(); toolbar.setIconsPath("dhtmlxtoolbar/codebase/imgs/"); toolbar.setSkin("dhx_skyblue"); toolbar.addSeparator("sep", 1 ); toolbar.addButton("print", 3, "Print Documents", "print.gif", "print_dis.gif"); toolbar.addButton("email", 2, "Send Message", "email.png", "email.png"); var opts = [['id1', 'obj', 'New Opportunity', 'img1'], ['sep01', 'sep', '', ''], ['id2', 'obj', ' Opportunity Analysis', 'img2'], ['sep02', 'sep', '', ''], ['id3', 'obj', 'Pursuit Strategy & Approval', 'img3'], ['sep03', 'sep', '', ''], ['id4', 'obj', 'RFP or Supplier Selection', 'img4'], ['sep04', 'sep', '', ''], ['id5', 'obj', 'Contract Negotiations', 'img5'], ['sep05', 'sep', '', ''], ['id6', 'obj', 'In Approval Process', 'img6'], ['sep06', 'sep', '', ''], ['id7', 'obj', 'Implemented', 'img7'], ['sep07', 'sep', '', ''], ['id8', 'obj', 'Discontinued', 'img8'] ]; toolbar.addButtonSelect("select", 0, "Progress", opts, "cut.gif", "cut_dis.gif", "true", "true"); toolbars[id] = toolbar; } return true; });

It will create toolbar in each tab, but once.

#3

Thank you for the help. So I tried this but when the page loads there is no toolbar there. I have to click the tabbar to make it work. Is there something else to use besides onSelect? I need the toolbar to show on every tab when the page loads, not after selecting the tab. So the way you have it I have to select tab two then go back to tab one for the toolbar to show on tab one.

#4

You may set one of the tats active on page load:

tabbar.attachEvent(“onSelect”, function(id){
…//see previous
});
tabbar.setTabActive(‘a1’);