PDA

View Full Version : Event.within and click on boundlist of ComboBox



suamikim
8 Oct 2012, 2:10 AM
Hi there,

i have a window which should close itself automatically after the user clicks on any point of the document which is not inside the window itself. I achieved this by registering the click-event of the whole document and test with the within-method of the passed event-object if the click occured somewhere inside the window:

Working example: http://jsfiddle.net/AN63p/

var showWndBtn;

Ext.define('TestWindow', {
extend: 'Ext.window.Window',
title: 'Test window',
width: 400,
height: 400,
layout: {
type: 'vbox',
align: 'stretch'
},

items: [{
xtype: 'textarea',
flex: 1,
value: 'first text input area'
},{
xtype: 'combobox',
store: [[true, 'True'], [false, 'False']],
queryMode: 'local',
editable: false,
value: 'true'
},{
xtype: 'textarea',
flex: 1,
value: 'second text input area'
}],

listeners: {
'show': function() {
var me = this,
initialClick = true;

// Register the click-event for the whole document
Ext.EventManager.on(document, 'click', function(event) {
// Hide the window if the user clicked somewhere on the document outside the window itself!
// If we don't check for the initialClick, it would recognize the click on the "Show window"-button and
// hide the window right after it's creation...
if (!initialClick && !event.within(me.getEl())) {
me.close();
}
initialClick = false;
});
},
'close': function() {
showWndBtn.setDisabled(false);
}
}
});

Ext.onReady(function() {
showWndBtn = Ext.create('Ext.button.Button', {
itemId: 'showWindowBtn',
width: 150,
text: 'Show window',
renderTo: Ext.getBody(),
handler: function(btn) {
btn.setDisabled(true);
Ext.create('TestWindow').show();
}
});
});?

This is basically working but i have 1 problem:
If i open the boundlist of a ComboBox and select an item from it, the within-method returns false and therefore the window closes itself mistakenly.
A short look at the dom shows that the boundlist is no child-item of the element in which it's combobox-editor-parent is placed (see the screenshot), which is the reason for this behaviour.

Therefore the behaviour is pretty clear, but how could i avoid the window from being automatically closed after a click on the boundlist?

Thanks & best regards,

mik

evant
8 Oct 2012, 2:12 AM
You'll need to add another check, something like:



!event.within(combo.getPicker().getEl())

suamikim
8 Oct 2012, 3:03 AM
Perfect, the updated version looks like this:

Working example: http://jsfiddle.net/suamikim/AN63p/1/

// Register the click-event for the whole document
Ext.EventManager.on(document, 'click', function(event) {
var combobox = me.down('combobox'),
picker = (combobox && combobox.getPicker) ? combobox.getPicker() : undefined,
withinPicker = (picker && picker.getEl) ? event.within(picker.getEl()) : false;

// Hide the window if the user clicked somewhere on the document outside the window itself!
// If we don't check for the initialClick, it would recognize the click on the "Show window"-button and
// hide the window right after it's creation...
if (!initialClick && !(event.within(me.getEl()) || withinPicker)) {
me.close();
}
initialClick = false;
});

Thanks for the fast reply!