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

Question

I'm starting with CrossUI and want to reuse dialogs created by main application, but could not find a way to do it using the API, I read the cookbook, revised all examples (the one mentioned on cookbook "example4" do not reuse existing dialogs, it always create new ones).

Also the dialogs created through the main dialog always appear behind it, I could not find any API function to bring a dialog to front of all others (z-index).

The CrossUI forum indicate to ask questions here (I'm still evaluating it and did not contracted any support/license).

Here is the code I created so far to try solve this problem:

    //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);
                }
            }
    }

The above code seems to solve the reuse of already existing dialogs but the bring to front (z-index) is not solved yet.

For me this kind of functionality seems to be common on other GUI frameworks but could not find it on CrossUI, any help on this issue is welcome, thanks !

After apply the proposed answer:

Using the "xui.newCom" instead of "xui.ComFactory.newCom" as you've sugested and adding "this.dlg.show();" on "customAppend" make it work a bit better. But the dialog still do not show on top when created although it does when reused (but allways returning to the initial position). I noticed that your example creates a dialog from a button located in the html body but in my case it is created from a button inside another dialog, I'll publish the whole code.

// 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

I noticed that you use the xui.Com's "show" function, that will simply append DOM.

If you use xui.UI.Dialog's "show" funcion, the dialog will show onto the top.

Or, you can modify your code in "customAppend" function, like this,

main class code:

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();
                });
            }
        }
    } });

dialog class code:

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