如何在Xpage中将Editbox的模式从阅读模式更改为编辑模式？

Question

实际上，我已将特定字段的 Xpage 中的属性 - Read-Only 设置为 true。

我尝试更改其模式以在客户端 JavaScript 中进行编辑。但我无法改变。
我使用了以下代码...

document.getElementById("#{id:read}").readOnly=false; 

而且

dojo.attr("#{id:read}","readOnly",false); 

两者都失败了...

(@Trim)
Also in Server side Javascript XSP Code is:      

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
dojoTheme="true">
<xp:this.resources>
    <xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
</xp:this.resources>

<div id="dojoTest" dojoType="dijit.Dialog">
<xp:inputText id="field" defaultValue="Hello" readonly="true"></xp:inputText>

<xp:button value="Label" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="partial" refreshId="field">
        <xp:this.action> <![CDATA[{javascript:getComponent("field").setReadonly(false);}]]></xp:this.action>
    </xp:eventHandler></xp:button>
<xp:br></xp:br></div>

<xp:br></xp:br>
<xp:br></xp:br>
<xp:button value="Show Popup" id="button2">
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[dijit.byId("dojoTest").show();]]> </xp:this.script>
    </xp:eventHandler></xp:button>
</xp:view>

Answer 1

经过进一步审查，这个问题与该领域本身无关：问题中包含的代码适合所需的响应。相反，问题在于该事件是在 dijit.Dialog 内定义的。

当 Dojo 解析对话框时，出于布局原因，它会将 DOM 元素移动到正文的末尾。不幸的是，这也会将其移出表单。这会破坏任何服务器端事件，因为事件数据不再被序列化为表单的一部分。因此，在您的示例中，事件失败并不是因为事件代码错误，而是因为事件本身从未被触发。

对此的理想解决方案是使用扩展库（或 8.5.3 UP1）中的 Dialog 组件，而不是具有指定 dojoType 的 passthru div。如果这不是一个选项，则有一个解决方法...在页面底部添加以下组件：

<xp:scriptBlock>
    <xp:this.value><![CDATA[XSP.addOnLoad(function(){
    var dominoForm = XSP.byId("#{javascript:return view.findScriptCollector().getClientId(facesContext);}");
    dojo.query("div.dijitDialog").forEach(function(eachDialog){
        dojo.place(eachDialog, dominoForm, "last");
    });
});]]></xp:this.value>
</xp:scriptBlock>

这应该会导致所有已解析的对话框移回表单内，从而允许其中的事件再次正确触发。

Answer 2

如果您想在服务器端执行此操作，这里有一个切换读取/编辑模式的按钮示例：

var comp = getComponent("inputText1");
if (comp && !comp.isReadonly()) {
    comp.setReadonly(true);
}else if (comp && comp.isReadonly()) {
    comp.setReadonly(false);
}

查看 此站点 查看可通过 SSJS 交互的所有组件的所有属性。

Answer 3

通过使用创建字段

服务器创建一个

在 8.5.3 中，您将转到字段上的所有属性并添加值为 True 的 READONLY 属性

这将创建以下标记

<xp:inputText id="read" defaultValue="Marky">
    <xp:this.attrs>
        <xp:attr name="READONLY" value="true"></xp:attr>
    </xp:this.attrs>
</xp:inputText>

在 R8.5.3 之前的版本中，您可以在 onClientLoad 上以编程方式将 READONLY 属性添加到字段 的页面事件

使用dojo.attr("#{id:read}", "READONLY", "true");

这是标记

<xp:inputText id="read" defaultValue="Marky">

</xp:inputText>

<xp:eventHandler event="onClientLoad" submit="false">
    <xp:this.script><![CDATA[dojo.attr("#{id:read}", "READONLY", "true");]]></xp:this.script>
</xp:eventHandler>

，一旦您在表单上正确创建了字段，您就可以使用

document.getElementById("#{id:read}").removeAttribute('readOnly');使其可编辑。