2

我在正确显示我的 dojox DialogWidget 内容时遇到问题。我创建了两个工具栏和一个 ContentPane。这个想法是将一个工具栏固定在顶部宽度固定大小，另一个工具栏在底部，ContentPane 在中心。在我的情况下，我只看到顶部工具栏和 ContentPane，它们在剩余空间上延伸，因此看不到底部工具栏。内容在不同的浏览器中也显示不同。我在下面弹出我的代码。

<!DOCTYPE html>


<head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="main-demo.css" media="screen" />
    <link rel="stylesheet" href="medview.css" media="screen" />
    <link rel="stylesheet" href="main.css" media="screen" />


    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Dialog/Dialog.css" />


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="async:true, parseOnLoad: true"></script>

    <script type="text/javascript">

        dojo.require("dojo.parser");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.Toolbar");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.form.VerticalSlider");
        dojo.require("dijit.form.VerticalRuleLabels");
        dojo.require("dijit.form.VerticalRule");
        dojo.require("dijit.TooltipDialog");
        dojo.require("dojox.widget.Dialog"
            );


            dialog = null;

            dojo.addOnLoad(function() 
            { 

                container = dojo.create("div", {
                    class : "test",
                    id : "viewer"
                }, dojo.body());
                console.debug("Container ID: " + container);

                var appLayout = new dijit.layout.BorderContainer({
                    design : "headline",
                    style:'width:100%;height:100%',
                }, container.id);

                content = new dijit.layout.ContentPane({
                    region:"center",
                    title : "Viewports",
                    class : "dhMedViewViewport"
                });

                appLayout.addChild(content);

                viewportContainer = content.domNode;

                var imgToolbar_zgoraj = new dijit.Toolbar({
                    region:"top",
                }, "dhmv-toolbar");

                imgToolbar_zgoraj.addChild(new dijit.form.Button({
                    label : "Reset",
                    showLabel : true
                }));

                var imgToolbar_spodaj = new dijit.Toolbar({


                    region:"bottom",



                }, "dhmv-toolbar");

                imgToolbar_spodaj.addChild(new dijit.form.Button({
                    label : "Reset",
                    showLabel : true
                }));



                appLayout.addChild(imgToolbar_zgoraj);
                appLayout.addChild(imgToolbar_spodaj);

                appLayout.startup();


                dialog = new dojox.widget.Dialog({

                    sizeToViewport: true,
                    content : container
                });

            });

            function showDialogTwo() {
                dialog.startup();
                dialog.show();
            }

     </script>
</head>

<body class="claro">
    <p>
        Test dialogBox
    </p>
    <button id="buttonTwo" dojoType="dijit.form.Button" type="button">
        Show me!
        <script type="dojo/method" event="onClick" args="evt">
            showDialogTwo();
        </script>            
    </button>

</body>

4

0 回答 0