toolbar - buttonSelect via onclick event

Suite and Optimus Suite 5
#1

I have buttonSelect below

		var invoiceOpts = Array(
			Array('preview_invoice', 'obj', 'Preview Invoice', 'iconNew_dis.gif', 'iconNew_dis.gif'), 
			Array('send_invoice', 'obj', 'Send Invoice Email', 'Email_go.png', 'Email_go.png'),
			Array('testing1', 'obj', 'Testing 1', 'Email_go.png', 'Email_go.png'),
			Array('testing2', 'obj', 'Testing 2', 'Email_go.png', 'Email_go.png')
		);
		toolbar.addButtonSelect("print_invoice", 9, "Print Invoice", invoiceOpts, "print.gif", "print_dis.gif");

I would like to do two things:
1. Set up select item after click on buttonSelect
2. Call different application according to selected item from buttonSelect
3. the option list no change before/after clicking the selectButton or its option list.

the onclick callback function below

		toolbar.attachEvent("onClick",function(itemId){
			switch (itemId) {
				case "print_invoice":
					// attach URL to send email invoice into Panel b
					dhxLayout.cells("b").attachURL("dispatch.php?show_type=print_invoice&id=1234567&start_date=2009-09-01&end_date=2010-01-01&due_date=2010-01-16");
					break;
				case "preview_invoice":
					// attach URL to send email invoice into Panel b
					dhxLayout.cells("b").attachURL("dispatch.php?show_type=preview_invoice&id=1234567&start_date=2009-09-01&end_date=2010-01-01&due_date=2010-01-16");
					break;
				case "send_invoice":
					// attach URL to send email invoice into Panel b
					dhxLayout.cells("b").attachURL("dispatch.php?show_type=send_invoice&id=1234567&start_date=2009-09-01&end_date=2010-01-01&due_date=2010-01-16");
					break;
				case "testing1":
					// attach URL to send email invoice into Panel b
					dhxLayout.cells("b").attachURL("http://www.google.com");
					break;
				case "testing2":
					// attaching an object to Panel a
					dhxLayout.cells("a").attachObject("objId");
					break;
			}
		});

The problem I encountered as below,

  1. I try to use the following code to set up selected item,
    toolbar.getItem(itemId).setSelected(true);
    it does not work.
  2. After clicking on Testing 1, Testing 2, Send Invoice Email, buttonSelect option list are not changed, but after clicking on Print Invoice, Preview Invoice, the buttonSelect option list was left only Print Invoice.

[Note]
Print Invoice, Preview Invoice generate PDF file.

I guess the PDF header cause the problem, but I do not know how to solve it.

#2

The second problem is kind of being solved. I open a new window for two generating PDF list options - print_invoice, preview_invoice. The list option would appear after the user click these two options. But the second opening window header title disappears however I adjust the window position.

Another problem is that the content of the same panel can not be changed after I attached the object, for example a

…
.
#3

the content of the same panel can not be changed after I attached the object

You can set attachObject method again to place the object into the panel. The previous content will be removed in this case. To preserve it you may try to use detachObject method:

docs.dhtmlx.com/doku.php?id=dhtm … tachobject

#4

After I used detachObject, the toolBar in that panel disapplears. How could I get objectid in the layout cell, then detachObject(objId).

#5

In case of toolbar inside the cell you may try to use the following approach instead:

[code]dhxLayout.cells(“a”).attachObject(“objId”);

detachObject(“objId”)

function detachObject(id){
var obj = document.getElementById(id);
document.body.appendChild(obj);
obj.style.display = “none”;
}[/code]

#6

It does not work. I intend to detach objId1 which I attached it into layou cell b

dhxLayout.cells(“b”).attachObject(“objId1”);

#7

It does not work

Please provide the complete sample

#8

It works now. I used two button at toolbar to test it.

<script>
	toolbar_b = dhxLayout.cells("b").attachToolbar();
	toolbar_b.addButton("testing1", 12, "Testing 1", "Green-Dollar-icon.png", null);
	toolbar_b.addButton("testing2", 13, "Testing 2", "Green-Dollar-icon.png", null);
	toolbar_b.attachEvent("onClick", onClickToolbarMenu_b);
	function onClickToolbarMenu_b(itemId) 
	{
		switch (itemId) {
			case "testing1":
				// detach objId2
				detachObject("objId2");
				
				// attach objId1 to Panel b
				dhxLayout.cells("b").attachObject("objId1");				
				break;
			case "testing2":
				// detach objId1
				detachObject("objId1");
					
				// attach objId2 to Panel b
				dhxLayout.cells("b").attachObject("objId2");				
				break;
		}
	}

	function detachObject(id)
	{
		var obj = document.getElementById(id);
		document.body.appendChild(obj);
		obj.style.display = "none";
	}				
</script>

<body>
	<!-- Test object -->
	<div id="objId1" style="width: 100%; height: 100%; overflow: auto; display: none; font-family: Tahoma; font-size: 11px;">
		<div style="margin: 3px 5px 3px 5px;">
		Test Object 1,  Test Object 1
		</div>
	</div>
	<div id="objId2" style="width: 100%; height: 100%; overflow: auto; display: none; font-family: Tahoma; font-size: 11px;">
		<div style="margin: 3px 5px 3px 5px;">
		Test Object 2, Test Object 2
		</div>
	</div>
	......
</body>