PDA

View Full Version : Workaround for picker selection bugs



cyee
28 Jan 2013, 9:39 AM
Several people have reported a bug in the picker in 2.2.0 (and also 2.1.1?) where you can't select the last item.

A related bug occurs when you have a bunch of items in a slot (we have about 82) and listen to the change event. The event listener is being passed an incorrect value.

There is confusion on the first bug, because some people are reporting that it occurs only in desktop Chrome, while others are reporting it on devices. We are able to replicate the problem on devices.

I found that the following workaround fixes both problems on devices (but not on desktop Chrome).

First, set an itemCls on the slot. Let's say it's 'ABCD-item-cls'.

Then add the following to your SASS and compile:



.ABCD-item-cls {
height: 2.5em !important;
}

Kurt001
20 Feb 2013, 5:40 AM
That would be for me:
.x-picker-slot .x-dataview-item {
height: 2.5em !important;
}

But still its jumping inside chrome.

cyee
20 Feb 2013, 1:34 PM
Post your full code

Kurt001
20 Feb 2013, 3:18 PM
You asked for some code:



data = //some data
title = 'Choose this';
slots = [{
name: 'slotname',
title: title,
data: data,
value: 200 //is a valid value
}];
var .picker = Ext.create('Ext.Picker', {
action: 'ExamplePicker',
doneButton: Ext.MessageBox.OK,
cancelButton: Ext.MessageBox.CANCEL,
useTitles: !!title,
height: '13em',
slots: slots,
listeners: {
change: callback.change,
pick: callback.pick,
cancel: callback.cancel
}
});


// Add and show
Ext.Viewport.add(picker);
picker.show();

cyee
21 Feb 2013, 7:26 AM
Add an itemCls to your slot:




data = //some data
title = 'Choose this';
slots = [{
name: 'slotname',
title: title,
data: data,
itemCls: 'slot-item-cls',
value: 200 //is a valid value
}];
var .picker = Ext.create('Ext.Picker', {
action: 'ExamplePicker',
doneButton: Ext.MessageBox.OK,
cancelButton: Ext.MessageBox.CANCEL,
useTitles: !!title,
height: '13em',
slots: slots,
listeners: {
change: callback.change,
pick: callback.pick,
cancel: callback.cancel
}
});


// Add and show
Ext.Viewport.add(picker);
picker.show();




Now in your CSS, add:



.slot-item-cls {
height: 2.5em !important;
}