我从 CrossUI 开始，想要重用主应用程序创建的对话框，但找不到使用 API 来实现的方法，我阅读了食谱，修改了所有示例(食谱“example4”中提到的一个)不重用现有对话框，它总是创建新对话框)。
此外，通过主对话框创建的对话框总是出现在其后面，我找不到任何 API 函数可以将对话框置于所有其他对话框的前面(z-index)。
CrossUI 论坛表示可以在此处提问(我仍在评估它，并且没有签订任何支持/许可证)。
这是我迄今为止为尝试解决此问题而创建的代码:
//Main dialog new code to reuse already created dialogs
initialize : function(){
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
this.autoDestroy = true;
// To initialize properties
this.properties = {};
//Store references to already created dialogs
this.myChildDialogs = {};
},
//Register reference to new created dialog
newChildCreated : function(key, child){
this.myChildDialogs[key] = child;
},
//Remove a reference to a created dialog
childDestroyed : function(key, child){
this.myChildDialogs[key] = null;
},
...
_ctl_sbutton180_onclick:function (profile,e,src,value){
var ns = this, uictrl = profile.boxing();
if(this.myChildDialogs[src]) {
//if we already have a dialog reuse it
this.myChildDialogs[src].properties.zIndex = this.properties.zIndex + 1;
this.myChildDialogs[src].show();
return;
}
xui.ComFactory.newCom('App.OrdersListSearch' ,function(){
this.show(xui([document.body]));
var myFatherToCall = this.properties.myFatherToCall;
if(myFatherToCall){
//Let's tell our creator
if(myFatherToCall.newChildCreated){
myFatherToCall.newChildCreated(this.properties.myFatherTocallKey, this);
}
}
}, null, {myFatherToCall: this, myFatherTocallKey: src});
}
//--------------------------
//Code on the created dialog
_ctl_dialog2_afterdestroy:function (profile){
var ns = this, uictrl = profile.boxing();
var myFatherToCall = this.properties.myFatherToCall;
if(myFatherToCall){
//Let's tell our creator
if(myFatherToCall.childDestroyed){
myFatherToCall.childDestroyed(this.properties.myFatherTocallKey, this);
}
}
}
上面的代码似乎解决了现有对话框的重用，但置于前面(z-index)尚未解决。
对我来说，这种功能似乎在其他 GUI 框架上很常见，但在 CrossUI 上找不到它，欢迎对此问题提供任何帮助，谢谢!
应用建议的答案后:
按照您的建议使用“xui.newCom”而不是“xui.ComFactory.newCom”并添加“this.dlg.show();”在“customAppend”上使其工作得更好一些。但是，对话框在创建时仍然不会显示在顶部，尽管它在重用时会显示(但总是返回到初始位置)。我注意到您的示例从位于 html 正文中的按钮创建了一个对话框，但在我的情况下，它是从另一个对话框内的按钮创建的，我将发布整个代码。
// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
Instance:{
customStyle:{
"font-size":"18px",
"color":"#00ff00"
},
// To initialize instance(e.g. properties)
initialize : function(){
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
this.autoDestroy = true;
// To initialize properties
this.properties = {};
//Store references to already created dialogs
this.myChildDialogs = {};
},
//Register reference to new created dialog
newChildCreated : function(key, child){
this.myChildDialogs[key] = child;
},
//Remove a reference to a created dialog
childDestroyed : function(key, child){
this.myChildDialogs[key] = null;
},
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};
append((new xui.UI.Dialog())
.setHost(host,"ctl_dialog39")
.setLeft(20)
.setTop(20)
.setCaption("OurBiz")
.setMinBtn(false)
.setMaxBtn(false)
.setCloseBtn(false)
);
host.ctl_dialog39.append((new xui.UI.Tabs())
.setHost(host,"ctl_tabs2")
.setItems([{"id":"sales", "caption":"$app.Sales", "image":""}, {"id":"buys", "caption":"$app.Buys", "image":""}, {"id":"all", "caption":"$app.All", "image":""}, {"id":"gl", "caption":"$app.GL", "image":"", "closeBtn":false, "optBtn":false, "popBtn":false}, {"id":"config", "caption":"$app.Config"}])
.setValue("sales")
);
host.ctl_tabs2.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton199")
.setDockMargin({"left":5, "top":0, "right":5, "bottom":0})
.setLeft(20)
.setTop(20)
.setWidth(250)
.setCaption("$app.Buys")
, "buys");
host.ctl_tabs2.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton200")
.setDockMargin({"left":5, "top":0, "right":5, "bottom":0})
.setLeft(20)
.setTop(60)
.setWidth(250)
.setCaption("$app.Payments")
, "buys");
host.ctl_tabs2.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton201")
.setDockMargin({"left":5, "top":0, "right":5, "bottom":0})
.setLeft(20)
.setTop(100)
.setWidth(250)
.setCaption("$app.Suppliers")
, "buys");
host.ctl_tabs2.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton202")
.setDockMargin({"left":5, "top":0, "right":5, "bottom":0})
.setLeft(20)
.setTop(140)
.setWidth(250)
.setCaption("$app.Products")
, "buys");
host.ctl_tabs2.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton180")
.setDockMargin({"left":5, "top":0, "right":5, "bottom":0})
.setLeft(20)
.setTop(20)
.setWidth(250)
.setCaption("$app.Sales")
.onClick("_ctl_sbutton180_onclick")
, "sales");
host.ctl_tabs2.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton183")
.setDockMargin({"left":5, "top":0, "right":5, "bottom":0})
.setLeft(20)
.setTop(60)
.setWidth(250)
.setCaption("$app.Payments")
, "sales");
host.ctl_tabs2.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton184")
.setDockMargin({"left":5, "top":0, "right":5, "bottom":0})
.setLeft(20)
.setTop(100)
.setWidth(250)
.setCaption("$app.Customers")
, "sales");
host.ctl_tabs2.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton185")
.setDockMargin({"left":5, "top":0, "right":5, "bottom":0})
.setLeft(20)
.setTop(140)
.setWidth(250)
.setCaption("$app.Products")
, "sales");
return children;
// ]]Code created by CrossUI RAD Tools
},
// Give a chance to load other com
iniExComs : function(com, threadid){
},
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
// This instance's events
events : {},
_ctl_sbutton180_onclick:function (profile,e,src,value){
var ns = this, uictrl = profile.boxing();
if(this.myChildDialogs[src]) {
//if we already have a dialog reuse it
this.myChildDialogs[src].show();
return;
}
//xui.ComFactory.newCom('App.OrdersListSearch' ,function(){
xui.newCom('App.OrdersListSearch' ,function(err, com){
//this.show(xui([document.body]));
com.show();
var myFatherToCall = this.properties.myFatherToCall;
if(myFatherToCall){
//Let's tell our creator
if(myFatherToCall.newChildCreated){
myFatherToCall.newChildCreated(this.properties.myFatherTocallKey, com);
}
}
}, null, {myFatherToCall: this, myFatherTocallKey: src});
}
}
});
// The default code is a com class (inherited from xui.Com)
Class('App.OrdersListSearch', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
Instance:{
// To initialize instance(e.g. properties)
initialize : function(){
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
this.autoDestroy = true;
// To initialize properties
this.properties = {};
},
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};
append((new xui.UI.Dialog())
.setHost(host,"dlg")
.setLeft(10)
.setTop(10)
.setWidth(598)
.setHeight(415)
.setCaption("$app.OrdersListSearch")
.afterDestroy("_ctl_dialog2_afterdestroy")
);
host.dlg.append((new xui.UI.Pane())
.setHost(host,"ctl_pane7")
.setDock("top")
.setDockMargin({"left":4, "top":4, "right":4, "bottom":4})
.setHeight(24)
);
host.ctl_pane7.append((new xui.UI.ComboInput())
.setHost(host,"ctl_comboinput2")
.setDock("fill")
.setDockMargin({"left":0, "top":0, "right":4, "bottom":0})
.setType("listbox")
.setItems([{"id":"a", "caption":"item a"}, {"id":"b", "caption":"item b"}, {"id":"c", "caption":"item c"}, {"id":"d", "caption":"item d", "disabled":true}])
);
host.ctl_pane7.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton5")
.setDock("right")
.setWidth(30)
.setCaption("?")
);
host.ctl_pane7.append((new xui.UI.Input())
.setHost(host,"ctl_input1")
.setDock("right")
.setDockMargin({"left":0, "top":0, "right":4, "bottom":0})
.setWidth(50)
);
host.dlg.append((new xui.UI.TreeGrid())
.setHost(host,"ctl_treegrid2")
.setDockMargin({"left":4, "top":0, "right":4, "bottom":0})
.setRowNumbered(true)
.setHeader([{"id":"col1", "width":80, "type":"input", "caption":"col1"}, {"id":"col2", "width":80, "type":"input", "caption":"col2"}, {"id":"col3", "width":80, "type":"input", "caption":"col3"}, {"id":"col4", "width":80, "type":"input", "caption":"col4"}])
.setRows([{"cells":[{"value":"row1 col1", "id":"c_a"}, {"value":"row1 col2", "id":"c_b"}, {"value":"row1 col3", "id":"c_c"}, {"value":"row1 col4", "id":"c_d"}], "id":"a"}, {"cells":[{"value":"row2 col1", "id":"c_e"}, {"value":"row2 col2", "id":"c_f"}, {"value":"row2 col3", "id":"c_g"}, {"value":"row2 col4", "id":"c_h"}], "id":"b"}, {"cells":[{"value":"row3 col1", "id":"c_i"}, {"value":"row3 col2", "id":"c_j"}, {"value":"row3 col3", "id":"c_k"}, {"value":"row3 col4", "id":"c_l"}], "sub":[["sub1", "sub2", "sub3", "sub4"]], "id":"c"}])
);
host.dlg.append((new xui.UI.Group())
.setHost(host,"ctl_group1")
.setDock("bottom")
.setDockMargin({"left":4, "top":0, "right":4, "bottom":4})
.setHeight(110)
.setCaption("$app.Search")
.setToggleBtn(false)
);
host.ctl_group1.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton8")
.setLeft(10)
.setTop(60)
.setWidth(80)
.setCaption("$app.Select")
);
host.ctl_group1.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton9")
.setLeft(100)
.setTop(60)
.setWidth(80)
.setCaption("$app.Update")
);
host.ctl_group1.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton10")
.setLeft(190)
.setTop(60)
.setWidth(80)
.setCaption("$app.Insert")
);
host.ctl_group1.append((new xui.UI.Input())
.setHost(host,"ctl_input4")
.setLeft(10)
.setTop(30)
.setWidth(260)
);
host.ctl_group1.append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton11")
.setLeft(280)
.setTop(30)
.setWidth(80)
.setCaption("$app.Search")
);
host.ctl_group1.append((new xui.UI.RadioBox())
.setHost(host,"ctl_radiobox1")
.setItems([{"id":"a", "caption":"item a"}, {"id":"b", "caption":"item b"}, {"id":"c", "caption":"item c"}, {"id":"d", "caption":"item d", "disabled":true}])
.setLeft(10)
.setTop(0)
.setWidth(370)
.setHeight(30)
.setValue("a")
);
host.ctl_group1.append((new xui.UI.ComboInput())
.setHost(host,"ctl_comboinput51")
.setLeft(280)
.setTop(60)
.setWidth(80)
.setType("listbox")
.setItems([{"id":"en", "caption":"$app.English"}, {"id":"es", "caption":"$app.Spanish"}])
.setValue("en")
.onChange("_ctl_comboinput51_onchange")
);
return children;
// ]]Code created by CrossUI RAD Tools
},
// Give a chance to load other com
iniExComs : function(com, threadid){
},
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// show to top
this.dlg.show();
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
// This instance's events
events : {},
_ctl_comboinput51_onchange:function (profile,oldValue,newValue){
var ns = this, uictrl = profile.boxing();
xui.setLang(newValue);
},
_ctl_dialog2_afterdestroy:function (profile){
var ns = this, uictrl = profile.boxing();
var myFatherToCall = this.properties.myFatherToCall;
if(myFatherToCall){
//Let's tell our creator
if(myFatherToCall.childDestroyed){
myFatherToCall.childDestroyed(this.properties.myFatherTocallKey, this);
}
}
}
}
});
最佳答案
我注意到您使用了 xui.Com 的“show”功能，该功能将简单地附加 DOM。
如果您使用xui.UI.Dialog的“show”功能，对话框将显示在顶部。
或者，您可以在“customAppend”函数中修改代码，如下所示，
主类代码:
Class('App', 'xui.Com',{
Instance:{
iniComponents:function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};
append((new xui.UI.SButton())
.setHost(host,"btn")
.setLeft(20)
.setTop(10)
.setWidth(90)
.setCaption("Show Dialog")
.onClick("_ctl_sbutton1_onclick")
);
return children;
// ]]Code created by CrossUI RAD Tools
},
_ctl_sbutton1_onclick:function (profile, e, src, value){
var ns=this;
// cache it
if(ns._cache){
ns._cache.show();
}else{
xui.newCom("App.Dialog", function(err,com){
ns._cache=com;
com.show();
});
}
}
} });
对话框类代码:
Class('App.Dialog', 'xui.Com',{
Instance:{
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};
append((new xui.UI.Dialog())
.setHost(host,"dlg")
.setLeft(90)
.setTop(20)
.setWidth(220)
.setHeight(110)
.setCaption("Dialog")
.beforeClose("_dlg_beforeclose")
);
return children;
// ]]Code created by CrossUI RAD Tools
},
customAppend : function(parent, subId, left, top){
// show to top
this.dlg.show();
// return true to stop the internal UI controls appending function
return true;
},
_dlg_beforeclose:function (profile){
// hide itself
this.dlg.hide();
// stop destroy
return false;
}
}
});
关于javascript - CrossUI如何重用已经创建的对话框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23690300/