[CLOSED] Combo .on('change',someFunction) doesn't fire / focus is lost to HtmlEditor [Archive]

Reimius

27 May 2010, 12:35 PM

Ext version tested:

Ext 3.2 rev (latest one)

Adapter used:

ext

css used:

only default ext-all.css

Browser versions tested against:

IE6
Firefox 3.6.3

Operating System:

WinXP Pro

Description:

It's a very simple problem: When losing focus on a Ext.form.combobox by clicking a Ext.form.HtmlEditor
Test Case:

error-demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MultiSelect & ItemSelector</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ux/css/MultiSelect.css"/>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="../../ext-all.js"> </script>
<script type="text/javascript" src="../ux/MultiSelect.js"></script>
<script type="text/javascript" src="../ux/ItemSelector.js"></script>

<script type="text/javascript" src="multiselect-demo-error.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>
</head>
<body>
<h1>MultiSelect & ItemSelector</h1>
<p>The js is not minified so it is readable. See <a href="multiselect-demo.js">multiselect-demo.js</a>.</p>

<b>MultiSelect</b><br />
<p>Press Save with no items selected to see an example of validation applied.</p>
<div id="multiselect" class="demo-ct" style="margin-bottom:15px;"></div>

<b>ItemSelector</b><br />
<p>Supports drag and drop, double-click, button move/reorder, etc.
<div id="itemselector" class="demo-ct"></div>
</body>
</html>

multiselect-demo-error.js

/*!
* Ext JS Library 3.2.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var theTextArea = new Ext.form.HtmlEditor({
fieldLabel: 'Pastries',
name: 'some_hidden_name',
emptyText: 'Some Empty Text',
width: 600,
height: 400,
allowBlank: false,
enableFont: false,
enableSourceEdit: false
});

var ds = new Ext.data.ArrayStore({
data: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});
var theBox = new Ext.form.ComboBox({
fieldLabel: 'Some Combobox',
hiddenName: 'some_other_hidden_name',
store: ds,
valueField: 'value',
displayField: 'text',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Blah blah...',
selectOnFocus:true,
//width:500,
forceSelection: true,
allowBlank: false,
autoSelect: true
});

theBox.on('change', function(){alert('Pastries');});
/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = new Ext.form.FormPanel({
title: 'MultiSelect Test',
width: 700,
bodyStyle: 'padding:10px;',
renderTo: 'multiselect',
frame: true,
defaults: {width: 500, labelStyle: "font-weight:bold;"},
items: [theTextArea, theBox],

buttons: [{
text: 'Save',
handler: function(){
if(msForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
msForm.getForm().getValues(true));
}
}
}]
});
});

See this URL : Can't post.

Steps to reproduce the problem:

select an item in the combobox
immediately click the text area in the htmleditor

The result that was expected:

An onchange event would fire with the alert: Cheese

The result that occurs instead:

the event is not fired

Screenshot or Video:

attached

Debugging already done:

none really

Possible fix:

no idea

Jamie Avins

27 May 2010, 1:23 PM

I'm not sure there is much we can do since you focus an iFrame with the editor.

Reimius

28 May 2010, 6:19 AM

I have also tested this in Firebox and the undesired result still happens. This seems like (although maybe rare) a serious issue in certain cases, anyone have ideas on a fix?

Because this also happens in Firefox, I would believe it would affect most browsers? Would appreciate it if anyone could test later IE versions.

Also, the code up top refers to a lot of multi-select js things, just ignore that. I couldn't use my actual example on a public forum, so I created one off of the example one from the site for comboboxes with multiselect.

Reimius

29 May 2010, 7:54 AM

I've had this issue before with Iframes and moving things on top of them where the xy coordinates would get screwed up for other functions.
A solution to this problem may be to layer a transparent div over the iframe from the element that contains the iframe, that way when the iframe is clicked, you're actually clicking the div element that lays on top of it. When this element is clicked an event could fire that resolves where the person clicked to the correct destination within that iframe. It may be a complex solution, but would solve a lot of issues.

Another route would be to have the iframe inherit all of the events of the containing objects and fire them in the scope of the container, although I'm not sure if this would completely make sense.