Get Selected Value of a picker

[FireGlow]

Hey there,

I'm trying hard to get the selected value of a picker. After a few hours I'm totally confused why it doesn't just work. I just used the code of the example and added listeners. Last standing is here::


var picker = Ext.create('Ext.Picker', {
id : 'picker',
hideOnMaskTap: true,
slots: [
{
name : 'player',
title: 'Player',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
],
listeners: {


change : {
fn : function() {
for (myKey in Ext.getCmp('picker').getValue()){
alert (" Ext.getCmp('picker').getValue()["+myKey +"] = "+Ext.getCmp('picker').getValue()[myKey]);
}
}
},

pick : {
fn : function(picker, value) {
for (myKey in value)
{
alert ("value["+myKey +"] = "+value[myKey]);
}
}
}
}
});
Ext.Viewport.add(picker);
picker.show();


Both times the alert works but it only shows me value[player] = null or Ext.getCmp('picker').getValue()[player] = null. Is there anybody who can help me to get the selected value, since it is the most necessary functionality of a picker ;)

[FireGlow]

getValue: function() {
var values = {},
items = this.getItems().items,
ln = items.length,
item, i;
alert('test');


for (i = 0; i < ln; i++) {
item = items[i];
if (item && item.isSlot) {
alert(item.getName());
alert(item.getValue()); values[item.getName()] = item.getValue();
}
}


this._values = values;


return this._values;
}


I had a look at the sencha code and added 2 alerts. One is telling me "player" and the other "null". So the value is null after selecting one, maybe this is a bug in sencha lib itself or do I have to use another method to get the selected value?

[FireGlow]

Well after scanning the source code of sencha touch, I found following code that works for me:


slots: [
{

title: 'Blue 1',

name : 'playerB1',

data : [

{text: '50 KB/s', value: 50},

{text: '100 KB/s', value: 100},

{text: '200 KB/s', value: 200},

{text: '300 KB/s', value: 300}

]

}

],
listeners: {
change : {
fn : function() {
var items = this.getItems().items,
ln = items.length,
item, i, players = {};
for (i = 0; i < ln; i++) {
item = items[i];
if (item && item.isSlot) {
alert(item.getStore().getAt(item.selectedIndex).get(item.getValueField()));
}
}


I worked this out based on the code already found in the getvalue() method combined with the store getValue():


//STORE:
getValue: function() {
var store = this.getStore(),
record, value;


if (!store) {
return;
}


if (!this.rendered) {
return this._value;
}


//if the value is ever false, that means we do not want to return anything
if (this._value === false) {
return null;
}


record = store.getAt(this.selectedIndex);


value = record ? record.get(this.getValueField()) : null;
this._value = value;


return value;
}


I guess this is the reason why I got null for the normal call:



if (this._value === false) { return null;
}

[ofranky]

Hi

I'm struggling with the same problem. Thanks for sharing your solution but i think the detour over the store is a bit tedious...
Can someone of the Sencha Team please tell us how you would get the value of the slot that was picked?

And also, if I didn't miss something there is no event to listen to that fires when the picker is closed (by clicking on 'done'...). Do I have to listen for the button-tap event of the 'done'-button for that case?
Thanks.

[ofranky]

*push* (sorry for that)

[ofranky]

For me it turned out to be a problem to use a name for the slots...?!? Without a name it works. To get the chosen value I now use: this.picker.getValues().null :s