"form" view why not display overlay?

hello!
I use NOV 14,2011 1.0 version DHTMLX Touch,why “form” view not display overlay?

my code:
dhx.ready(function(){
dhx.ui({
view:“popup”,
id:“yyrq_popup”,
body:{
view:“calendar”,
id:“yyrq_calendar”,
weekHeader:true,
startOnMonday:false
}
}).hide();
dhx.ui({
view:“popup”,
id:“sgry_popup”,
body:{
view:“list”,
id:“sgry_list”,
url:encodeURI(“get_czry_json.asp”),
datatype:“json”,
select:true
}
}).hide();
dhx.ui({
view:“popup”,
id:“shdd_popup”,
body:{
view:“list”,
id:“shdd_list”,
url:encodeURI(“get_xswd_json.asp”),
datatype:“json”,
select:true
}
}).hide();
var config = {
type:“wide”, rows:[
{view:“form”, id:“myform”, width:1024, height:170, elements:[
{type:“clean”, rows:[
{type:“clean”, cols:[
{view:“text”, id:“yyrq”, label:“yyrq”, labelWidth:80, popup:“yyrq_popup”, readonly:true},
{view:“richselect”, id:“yygp”, label:“yygp”, labelWidth:80, datatype:“json”, url:encodeURI(“get_gpzd_json.asp”)},
{view:“text”, id:“yyzl”, label:“yyzl”, labelWidth:80},
{view:“text”, id:“sgry”, label:“sgry”, labelWidth:80, popup:“sgry_popup”, readonly:true}
]},
{type:“clean”, cols:[
{view:“text”, id:“gpyq”, label:“gpyq”, labelWidth:80, width:512},
{view:“richselect”, id:“fhdd”, label:“fhdd”, labelWidth:80, datatype:“json”, url:encodeURI(“get_fhdd_json.asp”)},
{view:“text”, id:“shdd”, label:“shdd”, labelWidth:80, popup:“shdd_popup”, readonly:true},
]},
{type:“clean”, cols:[
{view:“text”, id:“cphm”, label:“cphm”, labelWidth:80, width:512},
{view:“text”, id:“sjdh”, label:“sjdh”, labelWidth:80},
{view:“text”, id:“qbyf”, label:“qbyf”, labelWidth:80}
]},
{type:“clean”, cols:[
{view:“button”, type:“form”, id:“save”, label:“save”, inputWidth:150, align:“center”, click:“save”},
{view:“button”, type:“form”, id:“remove”, label:“delete”, inputWidth:150, align:“center”, click:“remove”},
{view:“button”, type:“form”, id:“reset”, label:“reset”, inputWidth:150, align:“center”, click:“reset”}
]}
]}
],
rules:{
yyrq:dhx.rules.isNotEmpty,
yygp:dhx.rules.isNotEmpty,
yyzl:dhx.rules.isNumber,
sgry:dhx.rules.isNotEmpty
}},
{view:“grid”, id:“mygrid”, width:1024, scroll:“y”, header:true, sorting:false, select:true, datatype:“json”, url:encodeURI(“get_gpyy_json.asp”),
fields:[
{id:“sn”, label:“sn”, width:48, align:“center”, template:"#sn#"},
{id:“yyrq”, label:“yyrq”, width:100, align:“center”, template:"#yyrq#"},
{id:“yygp”, label:“yygp”, width:80, align:“center”, template:"#yygp#"},
{id:“yyzl”, label:“yyzl”, width:80, align:“right”, template:"#yyzl#"},
{id:“sgry”, label:“sgry”, width:125, align:“center”, template:"#sgry#"},
{id:“gpyq”, label:“gpyq”, width:85, align:“left”, template:"#gpyq#"},
{id:“fhdd”, label:“fhdd”, width:100, align:“center”, template:"#fhdd#"},
{id:“shdd”, label:“shdd”, width:110, align:“center”, template:"#shdd#"},
{id:“cphm”, label:“cphm”, width:101, align:“center”, template:"#cphm#"},
{id:“sjdh”, label:“sjdh”, width:115, align:“center”, template:"#sjdh#"},
{id:“qbyf”, label:“qbyf”, width:80, align:“right”, template:"#qbyf#"}
]
}
]
}
dhx.ui(config);
//loading
dhx.extend($$(“mygrid”), dhx.ui.overlay);
dhx.extend($$(“myform”), dhx.ui.overlay); //render
$$(“mygrid”).render();
$$(“myform”).bind($$(“mygrid”));
//
$$(“myform”).attachEvent(“onValidationError”,function(id, data){
})
})
//
function save(){
if ($$(“myform”).validate()){
//show loading
$$(“myform”).showOverlay();

//hide loading
$$(“myform”).hideOverlay(); }
}

Logic which executed between showOverlay and hideOverlay commands are they sync or async ?

In case of sync logic - browser will not have time to render any element ( it will be busy with js code processing )

You can break sync logic as

function save(){ if ($$("myform").validate()){ //show loading $$("myform").showOverlay(); dhx.delay(function(){ ..... //hide loading $$("myform").hideOverlay(); }); } }