I was trying to add SplitContainer inside dialog programatically, I am not able to success it.
Could anyone please suggest me that is it possible to add SplitContainer inside Dialog? if yes please share the me the sample if you have anything.
Thanks Murugan
The popover widget is our own widget and derived from dojo dialog.
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 = [];
}
});
});
Note that the SplitContainer
is deprecated , so you should use other layout instead , in this case using BorderContainer
and use the liveSplitter:true
may help you ,
Please see this working Fiddle .
and a working snippet :
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>