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

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

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.