javascript - CrossUI如何重用已经创建的对话框？

Question

我从 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);
            }
        }
    }
    }
});

Answer 1

我注意到您使用了 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;
        } 
    }
});