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

Question

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

有人可以建议我在对话框中添加 SplitContainer 吗？如果是的话，请把样品分享给我。

谢谢穆卢甘

弹出窗口小部件是我们自己的小部件，派生自 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 = [];
        }
    });
});

Answer 1

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

请查看此工作Fiddle。

和一个工作片段：

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>

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

Is that possible to show split container inside dialog/modal dialog in dojo?

javascript

dojo

splitcontainer

dijit.dialog