Layout type Progress bar in window

Suite and Optimus Suite 5
#1

Hi,
I am using dhtmlxwindow as a popup in my app.
i have 5 windows which are created initially using window object of layout object when application loaded and all in hidden mode.
based on the requirement i am showing and hiding the windows.

And i have a global window event i.e., oncontentload of window. like below.

dhxWindow.attachEvent(“onContentLoaded”,function(win)
{
if(win.idd == ‘winName’){
//do something
}else if (win.idd == ‘window2’){
//do something different
}
});

So my question is if i need layout like progress bar in my windows, i can do like

var layout = win.attachLayout(“1C”);
layout.cells(“a”).hideHeader();

layout.progressOn(); //or layout.cells(“a”).progressOn();

layout.cells(“a”).attachURL(…);

as u said in one of topic in forum

but if i use attachurl method on layout cell object, window oncontentload method will not work right!

So how can do this ?

Thanks in advance!

Naresh

#2

Hi
You can put layout.cells(“a”).progressOn() in onContentLoaded event:

dhxWindow.attachEvent("onContentLoaded",function(win) { if(win.idd == 'winName'){ layout.cells("a").progressOn() //do something layout.cells("a").progressOff() }else if (win.idd == 'window2'){ layout.cells("a").progressOn() //do something different layout.cells("a").progressOff() } });

#3

If i use attachurl method on cell object , how window oncontentloaded event works?

#4

You can do the same loading mask for window:

var modalBar = document.createElement("DIV"); modalBar.style.position = "absolute"; modalBar.style.left = "0px"; modalBar.style.top = "0px"; modalBar.style.width = "100%"; modalBar.style.height = "100%"; modalBar.style.backgroundColor = "gray"; modalBar.style.opacity = "0.6"; modalBar.style.SOME_MORE_STYLE_YOU_NEED w1.vs[w1.av].dhxcont.insertBefore(modalBar,w1.vs[w1.av].dhxcont.lastChild);

#5

Hi,
In your answer you have created a div with some style.
But i ddnt undstd what the last line

w1.vs[w1.av].dhxcont.insertBefore(modalBar,w1.vs[w1.av].dhxcont.lastChild);

can u please explain what it is and how to use it.

Thanks in advance.
Naresh

#6

This line adds object ‘modalBar’ to the DOM.

#7

Hi,
when i need progressbar i can use the modalbar as u said.
then after loding the page , i mean after completion of conted loading how can i remove that modalbar from window?

Thanks,
Naresh

#8

Apply ID to this div in its init:

 modalBar.id = "modalBar";

And then when you want to destroy it - call

document.getElementById("modalBar").parentNode.removeChild(modalBar)
#9

Thanks Darya,

It is worked :slight_smile:

But cant i use the same image what we have to layout progressbar instead of this modalbar div?

#10

You need to put this image (dhxlayout_progress_global.gif) in this div and position it.