PDA

View Full Version : How to scroll to a specific element in a selectfield?



Limbo
4 Jan 2012, 7:37 AM
How to scroll to a specific element in a selectfield?

I am loading the options and setting the selected one, like this:


SelectFieldEndTime.setOptions(jsonObject, false);
SelectFieldEndTime.setValue(_Selected);

This populates the list and selects the correct one. The problem is, that when I click it, I am scrolled to the top, although the selected item is somewhere in the middle.

How can I scroll to the selected element after setting the value?

mitchellsimoens
4 Jan 2012, 8:05 AM
When the list is shown, the scroller has a scrollTo method that you can use.

Limbo
6 Jan 2012, 6:41 AM
I can't get this to work. The selectfield has no scroller property.

var SelectFieldEndTime = Ext.getCmp('SelectFieldEndTime');
SelectFieldEndTime.setOptions(jsonObject, false);
SelectFieldEndTime.setValue(_Selected);
alert(SelectFieldEndTime.scroller);

gives undefined.

Am I doing something wrong? How can I access the scroller for the SelectField?

mitchellsimoens
6 Jan 2012, 6:49 AM
The list does... under the picker property I believe.

Limbo
6 Jan 2012, 6:58 AM
SelectFieldEndTime.picker gives nothing too...

I must be doing something wrong.

I create the selectfield like this:


xtype: 'selectfield',
id: 'SelectFieldEndTime',
name: 'SelectFieldEndTime',
label: 'End Time',
width: 290,
forceSelection: true,


And then referencing it like this:

var SelectFieldEndTime = Ext.getCmp('SelectFieldEndTime');
SelectFieldEndTime.setOptions(jsonObject, false);
SelectFieldEndTime.setValue(_Selected);
alert(SelectFieldEndTime.picker);


Is this correct?

mitchellsimoens
6 Jan 2012, 7:04 AM
I'm sorry, on a phone it is picker but that is an Ext.Picker instance. On anything else, its a floating Panel saved on listPanel property of the selectfield and you need to go down to the list:


var list = selectfield.listPanel.down('list'),
scroller = list.scroller;

Limbo
6 Jan 2012, 7:37 AM
There is no listPanel property, but there is a getListPanel() method.

These both return objects:


alert(SelectFieldEndTime.getListPanel());
alert(SelectFieldEndTime.getListPanel().down('list'));


But none of them have a scroller property :(


alert(SelectFieldEndTime.getListPanel().scroller);
alert(SelectFieldEndTime.getListPanel().down('list').scroller);

mitchellsimoens
6 Jan 2012, 7:46 AM
The list isn't going to be rendered until you tap on the field to show it and the scroller won't be there until the panel is rendered.

Limbo
6 Jan 2012, 7:52 AM
Great! I was thinking that might be it, but didn't try it.

I will try to work something out, so that it only scrolls after you click the field. Thanks for the help :)

Limbo
6 Jan 2012, 8:33 AM
I am running into this problem:

http://www.sencha.com/forum/showthread.php?134026-selectfield-events-not-working

The events are not firing. The only one that works is the change event.

Any suggestions?