Sencha fieldsets are not displayed in windows phone/internet explorer - sencha-touch-2

Question

I have implemented the following using sencha 2.3.1:
I have created a sencha app with the command: sencha generate app TempApp c:/TempApp
I have replaced the default app/view/Main.js by
Ext.define('TempApp.view.Main', {
extend: 'Ext.form.FormPanel',
alias : 'widget.login',
config: {
id : 'login',
cls : ['account-login','mobile'],
layout:{
type : 'vbox',
align: 'center',
pack : 'center'
},
defaults:{
width: 240
},
scrollable: {
direction: 'vertical'
},
items:[
// TOP TOOLBAR
{
xtype : 'toolbar',
ui : 'dark',
docked : 'top',
title : '',
width : undefined
},
// FIELSDSET
{
xtype: 'fieldset',
title: 'login',
items:[
{
xtype: 'emailfield',
name : 'email',
placeHolder: 'email',
value: ''
},
{
xtype: 'passwordfield',
id : 'loginPasswordField',
name : 'password',
placeHolder: 'password',
value: ''
},
{
xtype : 'checkboxfield',
name : 'remember',
//hidden : true,
label : 'remember',
value : 'true',
checked: true,
labelWidth: '80%'
}
]
},
// AND BUTTONS
{
xtype : 'button',
id : 'loginButton',
ui : 'confirm',
text : 'login',
margin: '5',
handler: function(button, evt){
}
},
{
xtype: 'button',
id : 'forgotButton',
text : 'forgot password',
margin: '5',
handler: function(button, evt){
}
},
// BOTTOM TOOLBAR
{
xtype : 'toolbar',
ui : 'dark',
docked : 'bottom',
width : undefined
}
],
listeners: {
initialize: function(view, options){
}
}
}
});
fieldset is not displayed in internet explorer and windows phone
I have read this: http://www.sencha.com/forum/showthread.php?272642 and it seems that there is a problem with fieldsets.
How can I use fieldsets with email and password fields inside in windows phone?

Answer 1

First a useful tool to fix this error is the emulation tool internet explorer 11
F12 > Emulation > Explorer Profile > Windows Phone
This tool can also be useful: Remote HTML5 debugging on Windows Phone with weinre
Finally in the stylesheet of our application located in path touch/resources/css comment the following attribute in wp.css file
~ div:not(.x-msgbox) .x-input-el {/ * visibility: collapse * /}
In the controller we can use the following code for windows phone (the picker div must have a onclick event for the browser wp disregard the input onclick of which are under the mask):
Ext.define('AppName.controller.ControllerName', {
extend: 'Ext.app.Controller',
requires: [
// ...
],
config: {
refs: {
//...
},
control: {
"picker[id='PickerId']":{show:'onPickerShow'}
//...
}
},
onPickerShow: function(picker,o){
if(picker.getId()=='PickerId'){
document.getElementById("PickerId").onclick = Ext.emptyFn;
}
},