使用 JavaScript/HTML 将按钮添加到 gridPanel 的底部

Question

我是 JavaScript 新手，需要一些帮助。我已经设法在工具栏上添加按钮，但是，我现在尝试在 gridPanel 的底部添加一个按钮，但不确定如何执行此操作。我在此表单中定义了 3 个 gridPanel

'''

<form>
  <gridPanel domain="GridPanel1" inlineEdit="true" linkType="editPopup" validationFormula="items.length > 0" validationMessage="At least 1 Driver is mandatory on the Drivers screen">
  </gridPanel>
  
  <gridPanel if="Status:eq:D" domain="Note" title="Notes" inlineEdit="true" editableGrid="True" />
  <gridPanel if="Status:eq:D" domain="Task" filter="ParentID={Proposal.ProposalID-#}" inlineEdit="true" title="Tasks" newQueryString="ParentID={Proposal.ProposalID-#}&amp;&amp;ParentDomainID=60"/> 
  <scriptPanel>
    
    <!-- Order button --> 
    var orderMVRButton = document.createElement('button');
    orderMVRButton.innerHTML="Order MVR";
    orderMVRButton.style.display = 'block';
    orderMVRButton.style.margin = '0 auto';
    document.body.append(orderMVRButton);
</scriptPanel>
 
</form>

'''

这是我到目前为止的代码，我看到按钮被添加到屏幕中间，但是，“订单按钮”需要如下图所示。它应该位于第一个 gridPanel 下，并且根据不断添加到其中的记录数量，按钮位置应该是动态的。我怎样才能最好地实现这一点？我可以在“document.body.append”中使用 gridPanel 中的什么来告诉它将按钮放在正确的位置。

Answer 1

“订单按钮”需要位于位置右侧，下面是js代码。

<!-- Order button --> 
var orderMVRButton = document.createElement('button');
orderMVRButton.innerHTML="Order MVR";
orderMVRButton.style.display = 'block';
orderMVRButton.style.margin = '0 0 0 auto';
document.body.append(orderMVRButton);