是否可以在 dojo 的对话框/模态对话框中显示拆分容器？

Posted 2023-04-01

【中文标题】是否可以在 dojo 的对话框/模态对话框中显示拆分容器？

【英文标题】：Is that possible to show split container inside dialog/modal dialog in dojo?

【发布时间】：2017-10-11 08:24:29

【问题描述】：

我试图以编程方式在对话框中添加 SplitContainer，但我无法成功。

谁能建议我可以在 Dialog 中添加 SplitContainer 吗？如果是的话，如果你有任何东西，请把样品分享给我。

谢谢 穆鲁甘

popover 小部件是我们自己的小部件，源自 dojo 对话框。

define("storm/service/serviceErrorDeploy/serviceErrorDeploy", ["dojo/_base/declare",
        "dojo/data/ItemFileWriteStore",
        "xwt/widget/table/Table",
        "dijit/layout/ContentPane",
        "dijit/tree/ForestStoreModel",
        "xwt/widget/layout/Popover",
        "dojo/_base/lang",
        "dojo/dom",
        "dojo/i18n!storm/nls/actions",
        "xwt/widget/table/GlobalToolbar",
        "xwt/widget/tree/Tree",
         'dojo/dom-construct',
         'dojo/query',
         "dojo/_base/array"      
        ], function(declare, ItemFileWriteStore, Table,ContentPane, ForestStoreModel, Popover,lang,dom,nls,GlobalToolbar,Tree,domConstruct,query,array)
    return declare("storm.topology.serviceErrorDeploy.widget.serviceErrorDeploy", [Popover], 
        i18n: nls,
        id:"serviceErrorPop",
        pinnable:false,
        baseClass: "serviceErrorDeploy",
        errorProvisioningDetailsTable:null,
        errorProvisioningDetailsCPane:null,
        summaryData : null,
        url : '/webacs/api/v1/data/DeviceConfigDeploymentStatus.json?.full=true&cfsId=',
        tableData:null,
        resizable:true,
        treeArray: [],
        postCreate: function()
            this.inherited(arguments);
            if(dijit.byId('errorProvisioningDetailsCPaneID'))
                try                    
                    dijit.byId('errorProvisioningDetailsCPaneID').destroy();                    
                catch(err) console.log(err);
             
            var tableTrs = query('.serviceErrorDeployPopup');
            tableTrs.forEach(lang.hitch(this,function(obj) 
                var node = query('.xwtPopoverClose',obj)[0];
                if(node && node !=undefined)
                    node.click();
            ));
        ,
        setValues: function(values, cell)
            this.inherited(arguments);
            this.setAttribute('title',values.name);
            this.url += values["@id"]?values["@id"]:values.version>=0?values.provisionedCfsId:values.discoveredCfsId;
            this.createWidgetStructure();
        ,
        createWidgetStructure:function()
            this.splitterPane = new  xwt.widget.layout.SplitContainer(id:'errorDetailsSplitContainer',useFullViewPort:true, this.containerNode);
            this.errorProvisioningDetailsCPane = new ContentPane(
                id: "errorProvisioningDetailsCPaneID",
                region: "top",
                style:"height:100%;border: 1px white solid;overflow:hidden;"
            );                 
            this.errorDetailsTreeCPane = new ContentPane(
                id: "errorDetailsTreeCPaneID",
                region: "center",
                style:"height:270px;border: 1px white solid;"
            );
            this.splitterPane.addChild(this.errorProvisioningDetailsCPane);
            this.splitterPane.addChild(this.errorDetailsTreeCPane);
            this.splitterPane.startup();
            this.splitterPane.resize();         
        ,
        hide: function(evt) 
            this.inherited(arguments);
            if (this.errorProvisioningDetailsCPane) 
                this.errorProvisioningDetailsCPane.destroyRecursive();
                this.errorProvisioningDetailsCPane = null;
            
            this.treeArray = [];
        ,
        destroy: function()
            this.inherited(arguments);
            if (this.errorProvisioningDetailsCPane) 
                this.errorProvisioningDetailsCPane.destroyRecursive();
                this.errorProvisioningDetailsCPane = null;
            
            this.treeArray = [];
        
    );
);

【问题讨论】：

如果您能在此处分享您的代码，将会很有帮助。

添加的代码无法附加文件

【参考方案1】：

请注意 SplitContainer 已弃用，因此您应该改用其他布局，在这种情况下使用 BorderContainer 并使用 liveSplitter:true 可能会对您有所帮助，

请看这个工作Fiddle。

还有一个工作的 sn-p ：

require(["dijit/layout/BorderContainer","dijit/layout/ContentPane","dijit/Dialog","dijit/registry", "dojo/dom","dojo/on","dijit/form/Button","dojo/ready"],
		function(BorderContainer,ContentPane,Dialog,registry,dom,On,Button,ready)
    		ready(function()
        	myDialog = new Dialog(
              title: "My Dialog",
              content: "Test content.",
              style: "width: 300px"
          ,"dialog");
          
          var borderContainer = new BorderContainer(
          	style:"height: 300px; width: 300px",
             gutters:true, 
             liveSplitters:true
          );
          
          var cp1 = new ContentPane(
              region: "center",
              splitter:true,
              style: "width: 100px",
              content: "content 1"
          );
          borderContainer.addChild(cp1);

          var cp2 = new ContentPane(
         			splitter:true,
              region: "right",
              content: "content 2"
          );
          borderContainer.addChild(cp2);
          
          myDialog.addChild(borderContainer);
          
          On(registry.byId("btn"),"click",function(e)
          	myDialog.show();
          )
          
          
        );    
    
);

<script>
dojoConfig = 
  isDebug: true,
  parseOnLoad: true,
;
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>

<body class="claro">
<div data-dojo-type="dijit/form/Button" id="btn"> click me </div>
<div id="dialog"></div>
</body>