Displaying a progress indicator for long operations

Discontinued products DHTMLX Touch
#1

I’m trying to display a progress indicator while I pull some data from a server. I couldn’t find anything built into DHTMLX touch, so I found a Javascript library that is used as follows:

var target = document.getElementById(‘foo’);
var spinner = new Spinner(opts).spin(target);

I need to get a handle to a list defined as follows, as I want the indicator to be centered on the list, and not on the whole app:

{
    view : "activeList",
	id : "customerList",
	name : "customerList",
	type : { width : 'auto', height : 'auto', padding : 10 },
	scroll : true,
	datatype : "json",
	select : true,
	activeContent : {
		deleteCustomerAC : {
			id : "deleteCustomerBtn",
			view : "button",
			label : "delete",
			width : 150,
			earlyInit : true
		}
	},
	template : "#lastName#, #firstName# (#name#) <div style='float:right'>{common.deleteCustomerAC()}</div>"
}

document.getElementById(“customerList”) returns nothing - is it possible to get ahold of the list in this manner? Or is there another progress indicator library known to work with dhtmlx touch?

Thanks.

#2

There is a spinner built in to DHTMLX Touch…

For me, I am using a multiview and its ID is main so I extend it:

dhx.extend($$('main'),dhx.ui.overlay);

Then I display the spinner when I need to:

$$('main').showOverlay();

And to hide the spinner:

$$('main').hideOverlay();

If you do not like the existing spinner, you can change it easily using CSS in your HTML file:

<style> .dhx_loading_overlay{ width:100%; height:100%; background-color:#D6D6D6; opacity:0.6; background-image:url(./loading.gif); background-repeat:no-repeat; background-position:center; } </style>

#3

Thanks for the response - this is exactly what I need.

capture.tiff1212×619 87.2 KB