All blog posts, code samples and downloads licensed under Apache License 2.0.
Close

ExtJS Viewport breaks Xpages events - and a workaround


Actually it breaks the whole DOM, but read on:

I recently found this issue when using ExtJS for an application layout, especially when using the Viewport class. It simply breaks the event model of the XSP container so that nothing will work as expected Wütend

But try for yourself!

Create a simple XPage and paste this code into it:

<?xml version="1.0" encoding="UTF-8"?>
	<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	    <xp:this.resources>
	        <xp:script src="/combo.js" clientSide="true"></xp:script>
	    </xp:this.resources>
	    <xp:panel id="panel">
	        <xp:comboBox id="comboBox1" value="#{sessionScope.groupBy}">
	            <xp:selectItem itemLabel="nothing" itemValue=""></xp:selectItem>
	            <xp:selectItem itemLabel="State" itemValue="state"></xp:selectItem>
	            <xp:selectItem itemLabel="CCType" itemValue="cctype"></xp:selectItem>
	            <xp:eventHandler event="onchange" submit="true"
	                refreshMode="complete">
	                <xp:this.action>
	                    <xp:executeScript>
	                        <xp:this.script>
	                            <![CDATA[	
	                           #{javascript:sessionScope.groupBy = getComponent("comboBox1").getValue();
	                           print( getComponent("comboBox1").getValue() )}
		                   ]]>
	                        </xp:this.script>
	                    </xp:executeScript>
	                </xp:this.action>
	            </xp:eventHandler>
	        </xp:comboBox>
	    </xp:panel>
	</xp:view>
	 

Create a CSJS lib called combo.js and paste this code:

Ext.onReady(function(){
    Ext.create('Ext.Viewport', {
	        title:"panel",
	        renderTo: Ext.getBody(),
	        items: [{
	            xtype:'panel',
	            width: 200,
	            height: 200,
	            contentEl: dojo.query("[id$=:panel]")[0].id
	        }]
	    })
	})

Of course you also have to bind the ExtJS lib and the CSS to your page to get this working.

You will expect that the combo value is not correctly submitted, you will get the value null (printed in the server's console) and also the scoped variable is not set. Then remove the CSJS lib from the page - and your combo will work as intended.

The reason ist that ExtJS will manipulate the DOM, so that the combo isn't part of the form element anymore.

This is really annoying, and if someone has a solution please give me a hint Cool

UPDATE

There is finally a workaround and Tim Tripcony gave me the hint:

Place your form components in a xp:form container. As you cannot choose this container from the palette you have to edit the XML source manually. 


Tagged with ExtJS XSP events 

Latest comments on this page

Sag Awards 2019 Live wrote on 23.10.2018, 17:21

121,544 qualified Republicans that this year.  The service includes itself as being

the initial awards show to acknowledge the work of the first and also union members to ever present awards for picture casts and television ensembles.  Sag Awards 2019 Live 


Sag Awards Live wrote on 21.10.2018, 07:45

 Th latter, pundits will say, is key considering that no film perhaps not  nominated it has won the Best Picture Oscar since Braveheart at 1996.  We imagined that streak may possibly have been busted a year by La La Land, also it had been true for approximately one minute prior to the true oscar-winner Moonlight was disclosed.   Moon Light  hadbeen nominated for the SAG Forged award but dropped to Concealed Bodies .


woom wrote on 13.10.2018, 12:04

Food menu wrote on 10.06.2018, 13:05

Barnes and Noble Gift Card Balance need to be a book lover to appreciate the great deals and discount offered by Barnes and Noble. Buying a gift card for someone special or even yourself would never be a wrong deal.

Is It Wrong to Try to Pick Up Girls in the Dungeon season 2 suggests that the new story will not be around Bell Cranel but the new protagonist will be Sword Princess Wiz Wallestein.

The prices aren’t too high for the service and food they offer and is quite cheap as compared to the other fast food chains and restaurants in the country. Taco Time is no doubt providing fresh, good quality and delicious Mexican food in low prices Taco Time Menu


Eleanor Robbins wrote on 22.09.2017, 13:53

As a student, I always hunting for the best and informative material to get online assignment help because I am enrolled in BSCS program and also learning web development so this post is highly important for me.