Question

This question shows how to hide a cancel button on a programmatic ConfirmDialog in Dojo.

How to do the same thing, i.e. hiding the Cancel button, if the ConfirmDialog is declarative as below in a HTML template:

<div class="confirmDialog" 
     data-dojo-type="dijit/ConfirmDialog" 
     data-dojo-attach-point="confirmDialogAttachPoint" 
     data-dojo-props="title:'MyDialog', content:'Some Content', closable:false" 
     data-dojo-attach-event="onExecute:doSomething">
</div>

Doing the following in postCreate function of the corresponding widget works:

domStyle.set(this.confirmDialogAttachPoint.cancelButton.domNode, "display", "none");

However, I want to know/learn if this could be done declaratively in the HTML file itself.

Answer 1

仅向您的窗口小部件添加一个CSS，CSS将隐藏您的按钮：

.dijitDialogPaneActionBar .dijitButton:nth-child(2) {
  display: none;
}

请参见以下代码段：

require(["dijit/ConfirmDialog", "dijit/form/TextBox", "dijit/form/Button"]);

    .dijitDialogPaneActionBar .dijitButton:nth-child(2) {
      display: none;
    }

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: 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.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />

<body class="claro">

  <div data-dojo-type="dijit/ConfirmDialog" data-dojo-id="myDialog" title="dialog">
    Hi !
  </div>

  <button data-dojo-type="dijit/form/Button" type="button" onClick="myDialog.show();">
    Show me!
</button>
</body>

Dojo declarative ConfirmDialog hiding cancel button

1 个答案: