Domino 9 und frühere Versionen > ND8: Entwicklung - XPages
Xpage und Dialogbox
(1/1)
pippo:
Hallo,
schlage mich schon seit Stunden mit einer Dialogbox herum ???
habe dieses Beispiel gefunden:
<?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>
<xp:button value="Dialog Popup" id="button2">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[dijit.byId("myDialogContainer").show()
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<div id="myDialogContainer" dojoType="dijit.Dialog"
style="display:none">
<xp:panel style="width:90%;height:auto">
Hier soll eine neue Anmeldung stattfidnen:
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:table>
<xp:tr>
<xp:td style="width:15px"></xp:td>
<xp:td style="width:20%"></xp:td>
<xp:td style="width:24.5%"></xp:td>
<xp:td style="width:24.5%"></xp:td>
<xp:td style="width:100%"></xp:td>
<xp:td style="width:15px"></xp:td>
</xp:tr>
<xp:tr>
<xp:td></xp:td>
<xp:td>Wer soll angemeldet werden?</xp:td>
<xp:td>
<xp:comboBox id="comboBox1">
<xp:selectItem itemLabel="Sich selbst"></xp:selectItem>
<xp:selectItem
itemLabel="Familienmitglied">
</xp:selectItem>
<xp:selectItem itemLabel="Nichtmitglied"></xp:selectItem>
<xp:selectItem
itemLabel="Anderes Mitglied">
</xp:selectItem>
</xp:comboBox>
</xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td></xp:td>
<xp:td>terst</xp:td>
<xp:td>
<xp:inputText id="inputText1"></xp:inputText>
</xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
</xp:table>
</xp:panel>
</div>
</xp:view>
möchte nun in der Dialogbox eine OK und ein Abbrechen machen
nach dem Klick auf OK möchte ich andere Felder der Dialogbox auslesen
kann mir bitte jemand einen Tipp geben, wie man sowas macht??
Beste Grüße
Jens Winkelmann:
Bei Chancel muss man einfach wieder hide machen
Bei OK kann man unterschiedliche Techniken einsetzen
A) Du könntest die Werte einfach per CSJS auslesen und verarbeiten
B) Du schreibst die Dialogwerte in View-Scope Variablen und holst dir die Werte via SSJS und verabeitest sie anschließend.
Im Fall B musst du die Dialog-Controls an View-Scope Variablen binden.
Da gibt es jedoch ein Problem im Zusammenspiel mit XPage und Dojo.
Einfach gesagt: Dojo kopiert beim Laden der Seite die Dialogbox außerhalb des XPage Form Tags.
Hierdurch funktionieren die Controls in der Dialogbox nicht.
Da gibt es aber folgenden Trick:
http://xpagesblog.com/xpages-blog/2010/4/10/xpages-compatible-dojo-dialog-reusable-component.html
Diesen Trick benötigst du nicht, wenn du die Extension Library verwendest.
Nachfolgend habe ich das Beispiel mit Technik B erweitert:
--- Code: ---<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true"
dojoTheme="true"><xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[dojo.provide('com.ZetaOne.widget.Dialog');
dojo.require('dijit.Dialog');
(function(){
dojo.declare("com.ZetaOne.widget.Dialog", dijit.Dialog, {
postCreate: function(){
this.inherited(arguments);
dojo.query('form', dojo.body())[0].appendChild(this.domNode);
},
_setup: function() {
this.inherited(arguments);
if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')
dojo.query('form', dojo.body())[0].appendChild(this.domNode);
}
})
}());]]></xp:this.value>
</xp:scriptBlock>
<xp:this.resources>
<xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
</xp:this.resources>
<xp:button
value="Dialog Popup"
id="button2">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[dijit.byId("myDialogContainer").show()
]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<div id="myDialogContainer" dojoType="com.ZetaOne.widget.Dialog"
style="display:none">
<xp:panel style="width:90%;height:auto">
Hier soll eine neue Anmeldung stattfidnen:
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:table>
<xp:tr>
<xp:td style="width:15px"></xp:td>
<xp:td style="width:20%"></xp:td>
<xp:td style="width:24.5%"></xp:td>
<xp:td style="width:24.5%"></xp:td>
<xp:td style="width:100%"></xp:td>
<xp:td style="width:15px"></xp:td>
</xp:tr>
<xp:tr>
<xp:td></xp:td>
<xp:td>Wer soll angemeldet werden?</xp:td>
<xp:td>
<xp:comboBox id="comboBox1" value="#{viewScope.V_Familienmitglied}">
<xp:selectItem itemLabel="Sich selbst"></xp:selectItem>
<xp:selectItem
itemLabel="Familienmitglied">
</xp:selectItem>
<xp:selectItem itemLabel="Nichtmitglied"></xp:selectItem>
<xp:selectItem
itemLabel="Anderes Mitglied">
</xp:selectItem>
</xp:comboBox>
</xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
<xp:tr>
<xp:td></xp:td>
<xp:td>terst</xp:td>
<xp:td>
<xp:inputText id="inputText1" value="#{viewScope.V_Terst}"></xp:inputText>
</xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
<xp:td></xp:td>
</xp:tr>
</xp:table>
<xp:br></xp:br>
<xp:button
value="OK"
id="buttonOK">
<xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete" disableValidators="true">
<xp:this.action><![CDATA[#{javascript:var inputFamilienmitglied:com.ibm.xsp.component.xp.XspInputText = getComponent("inputFamilienmitglied");
var inputTerst:com.ibm.xsp.component.xp.XspInputText = getComponent("inputTerst");
inputFamilienmitglied.setValue(viewScope.get("V_Familienmitglied"));
inputTerst.setValue(viewScope.get("V_Terst"));
}]]></xp:this.action>
</xp:eventHandler></xp:button>
<xp:button
value="Cancel"
id="buttonCancel">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[dijit.byId("myDialogContainer").hide();
return false]]></xp:this.script>
</xp:eventHandler></xp:button>
<xp:br></xp:br>
</xp:panel>
</div>
<xp:br></xp:br>
<xp:table>
<xp:tr>
<xp:td>
<xp:label
value="Familienmitglied"
id="label1">
</xp:label></xp:td>
<xp:td><xp:inputText id="inputFamilienmitglied"></xp:inputText></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label
value="terst"
id="label2">
</xp:label></xp:td>
<xp:td><xp:inputText id="inputTerst"></xp:inputText></xp:td>
</xp:tr>
</xp:table>
<xp:br></xp:br>
</xp:view>
--- Ende Code ---
Navigation
[0] Themen-Index
Zur normalen Ansicht wechseln