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

时间:2012-02-17 10:48:58

标签: javascript lotus-notes xpages

实际上,我已在Xpage中为特定字段设置了属性 - 只读

我试图将其模式更改为在客户端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>

3 个答案:

答案 0 :(得分:2)

经过进一步审核,此问题与字段本身无关:问题中包含的代码适用于所需的响应。相反,问题是事件是在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>

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

答案 1 :(得分:1)

如果您正在寻找这个服务器端,这里是一个切换读/编辑模式的按钮示例:

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

查看this site,查看您可以通过SSJS与之互动的所有组件的所有属性。

答案 2 :(得分:0)

使用创建字段 &lt; xp:inputText id =“read”readonly =“true”&gt;&lt; / xp:inputText&gt;

服务器创建&lt; SPAN标记 - 无法转换为文本字段

&lt; span id =“view:_id1:inputText1”&gt;&lt; / span&gt;

在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:读}”)。的removeAttribute( 'readOnly的');