PDA

View Full Version : Ext.form.Select not working as expected on mobile



domingosnovo
13 Jun 2011, 4:46 PM
Hello all,

I've been using Sencha Touch for the last few weeks, and besides the fact that I'm a JS newbie, I usually managed to solve my coding issues either by myself or by googling the web. This time, though, I was not that lucky. Please bear with me if this is a FAQ question, I really tried (and failed) to find an answer for my issue.

Right now my application is basically a really simple CRUD, with specific screens for each action. I am using google chrome (on mac) to test my app, and on this browser, everything works as expected. But, when I try to load that same application on iPhone or Android, I do get one "interface" issue. That is, I have a form with 3 different combos, each one populated dynamically through a Json Store. The store itself works as expected, as all options appears correctly, even on mobile. The problem is that specifically on a mobile browser, I am not able to switch options on this select forms.

I dont get any console or JS errors at all. It is just as if I didn't have the right listener for this action (maybe I just need to listen to an specific tap action - that would be the FAQ thing, probably).

This is the relevant part of the code I've wrote. Let me you if you need other parts of the code.




Ext.regModel('EquipJson', {
fields: ['id_equip', 'nome_equip', 'id_tp_equip', 'status_equip']
});

Ext.regModel('SalaJson', {
fields: ['id_sala', 'nome_sala']
});

EquipListStore = new Ext.data.Store({
model : 'EquipJson',
sorters: 'data',
proxy : {
type : 'ajax',
url : 'JsonEquip',
reader : {
type : 'json'
}
},
autoLoad : true
});

SalaListStore = new Ext.data.Store({
model : 'SalaJson',
sorters: 'data',
proxy : {
type : 'ajax',
url : 'JsonSala',
reader : {
type : 'json'
}
},
autoLoad : true
});

MyForm = new Ext.form.FormPanel({
title: 'Nova reserva',
xtype: 'form',
id: 'newitemform',
scroll: 'vertical',
url: 'ReservaMobile',
standardSubmit: true,
items: [{
xtype: 'fieldset',
title: 'Informações da reserva',
instructions: 'Por favor entre com as informações acima.',
defaults: {
labelWidth: '30%'
},
items: [
{
xtype: 'datepickerfield',
name: 'data_reserva',
label: 'Data',
picker: { yearFrom: 2011, yearTo: 2012, slotOrder: ['day', 'month', 'year'] }
},
{
xtype: 'selectfield',
label: 'Turno',
hiddenName: 'hora_reserva',
options: [{
text: 'Manhã',
value: '1'
}, {
text: 'Tarde',
value: '2'
}, {
text: 'Noite',
value: '3'
}]
},
new Ext.form.Select({
label: 'Equipamento',
valueField: 'id_equip',
displayField: 'nome_equip',
hiddenName: 'id_equip',
store: EquipListStore
}),
new Ext.form.Select({
label: 'Sala',
valueField: 'id_sala',
displayField: 'nome_sala',
hiddenName: 'id_sala',
store: SalaListStore
}),
{
xtype: 'hiddenfield',
name: 'status_reserva',
value: '1'
}
]
}]
})


Thanks in advance,

Domingos

mitchellsimoens
14 Jun 2011, 5:22 AM
What do you mean by not being able to switch options?

domingosnovo
14 Jun 2011, 6:04 AM
What I mean is the select renders correctly both on web and on mobile, but only on mobile if I try to click/tap on this field, the combo doesn't open at all.

I think I figured whats going on. I'm using "standardSubmit" on my form, and "hiddenName" (instead of "name") on those select fields. If I switch this "hiddenName" back to "name", the field works as expected.

So, it seems that either I'm missing something, or there is a bug with hiddenName + select fields, which only happens on mobile.

domingosnovo
14 Jun 2011, 6:11 AM
Btw, works on iPad (4.3.3) and Google Crome (Mac), fails on iOS 4.3.2 and Android 2.2.1/2.3.4.

christocracy
17 Jun 2011, 6:05 AM
Confirmed here.

When form.Select is rendered on a toolbar, the drop-down doesn't appear when field is clicked.



{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'selectfield',
options: [{
text: 'Answers for today', value: 'today',
text: 'Answers for yesterday', value: 'yesterday'
}]
}]
}

christocracy
17 Jun 2011, 6:16 AM
Just give your Ext.form.Select a name. Boooooo.

grooveyorkcity
29 Jun 2011, 10:23 AM
I came across this thread searching for a smilar issue. I had this same problem, and the through another thread found the need for the 'name' prop to get it working on the phones..HOWEVER, it seems that the changed event is not firign the same as it does on iPad/desktop testing.

For the iOs/Droid phones, the combobox now works but changing value (using rolling wheel that pops up at the bottom) seems to not fire anything (our view is not even being reloaded as it is on iPad) but the combobox label does in fact update. Is there a different event we should be firing/tracking?



fg