PDA

View Full Version : Pickerfield's picker ignores collapseIf when used in grid editor



Webtel
26 Sep 2012, 12:01 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.1.1



Browser versions tested against:

Firefox 15.0.1 (firebug 1.10.3 installed)



DOCTYPE tested against:

quirks



Description:

Pickerfield when used as grid editor ignores collapseIf method and so it's picker collapses when combo (located inside that picker) item is mouse clicked.
In other words pickerfield's picker panel collapses (vanishes) when conatained combo's item is selected by mouse click. It works fine (not collapses) when item is selected by enter key..





Steps to reproduce the problem:

run provided code (even in firebug/firebug lite) on page containing extjs 4.1.1 ((window containing grid will popup)
Start editing any row (ther is one column) by clicking it
click pickerfields trigger to open pikerfield's picker panel (or use down arrow key)
in the picker panel expand combo's list (click combo trigger)
using mouse select (click) item from the combo box that is located inside floating picker



The result that was expected:

item in combo should be selected and picker panel should still be active (visible) to allow other operations in it (like clicking button)
ilustration of above is in grid's bbar - there collapseIf function acts expectedly



The result that occurs instead:

after clicking on combo item picker instantly collapses (vanishes) preventing user to perform other operations inside picker (like clicking a button located inside that picker)
picker needs to be opened once more to continue functional process (in this case: to click a button adding value to pickerfield)
pickerfield's collapseIf method doesnt work right only when pickerfield is used as grid editor



Test Case:





Ext.define('MyModel', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: ['id', 'name']
});


Ext.define('MyPicker', {
extend: 'Ext.form.field.Picker',
alias: 'widget.mypicker',
anchor: '90%',
triggerCls: 'x-form-search-trigger',
initComponent: function() {
this.createPicker({
pickerField: this
});
this.callParent(arguments);
},
// way to prevent picker from hiding
collapseIf: function(e) {
var picker = this.picker.down('combobox').getPicker();
if (picker.rendered && e.within(picker.el)) {
return;
} else {
this.callParent(arguments);
}
},
picker: null,
createPicker: function(C) {
var me = this;
if (!me.picker) {
me.picker = Ext.create('Ext.panel.Panel', {
width: 300,
minWidth: 500,
height: 150,
floating: true,
title: 'select combo item and click button',
items: [{
xtype: 'combo',
labelAlign:'top',
fieldLabel:'click on combo item (picker collapses ignoring collapseIf when used in grid editor)',
width:250,
name: 'preselect',
valueField: 'id',
displayField: 'name',
store: Ext.create('Ext.data.ArrayStore', {
idIndex: 0,
model: 'MyModel',
data: [[1, 'one'], [2, 'two']]
})
}, {
xtype: 'button',
text: 'addValue',
handler: function(btn) {
me.setValue(me.getValue() + btn.prev().getValue());
}
}]
});
}
return me.picker;
}
});


Ext.require('*');


Ext.onReady(function() {
Ext.create('Ext.window.Window', {
autoShow:true,
layout:'anchor',
title:'grid editor pcikerfield problem',
width:400,//height:200,
items:[{
xtype:'grid',
store:Ext.create('Ext.data.ArrayStore', {
idIndex: 0,model: 'MyModel',
data: [[1, 'one'], [2, 'two']]
}),
bbar:[{emptyText:'Expected bahav',xtype:'mypicker'},'here is example of expected picker behaviour'],// here collapseIf works fine
plugins:[{ptype:'cellediting',clicksToEdit:1}],
columns:[{
header:'Edit this col (click any row, then click triger)',
width:300,
dataIndex:'name',
editor:{xtype:'mypicker'}
}]
}]
});


});





HELPFUL INFORMATION


If combo item is selected by enter key picker doesnt collapse (that is expected behaviour) - even without collapseIf function implemented


Under Google Chrome 21.0.1180.89 m result is the same (bad).


Using Ext 4.1.2 there are some rendering problems for pickerfield in grid editor (trigger wont show; You need to hit down arrow to see picker when editing).


For assurance of understanding instructions are added also in testcase itself.


Screenshot or Video:

none



Debugging already done:

none



Possible fix:

not provided



Additional CSS used:

only default ext-all.css



Operating System:

WinXP Pro

evant
26 Sep 2012, 12:30 AM
You'll need the same override in mimicBlur:



mimicBlur: function(e){
var picker = this.picker.down('combobox').getPicker();
if (picker.rendered && e.within(picker.el)) {
return;
} else {
this.callParent(arguments);
}
},

Webtel
26 Sep 2012, 1:07 AM
thank You

Prorok
29 Nov 2012, 7:17 AM
I have the same problem, in my case i have in picker grid with combo editor, when i dbl click in combo, picker disappears how i can get round it?