2

dojox DialogWidget コンテンツを正しく表示するのに問題があります。2 つのツールバーと ContentPane を作成しました。アイデアは、1 つのツールバーを上部の幅固定サイズに固定し、もう 1 つのツールバーを下部に固定し、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