Panel hides after tap

[ChillsNL]

Hello people, after some tips from yesterday, the application looks kind of better now, or at least, the login part works like it needs to work.

After the login part comes the panel and list part. I've worked and tried some things to make it work and make the list not hide after the panel/toolbar. At the end, I got that fixed and the list didn't hide behind the toolbar.

Funniest is, that when I got to that page and the list loads its data, the toolbar hides after you tap the screen. I'm having some hard times fixing that and need your help.

Photo 1 (http://img818.imageshack.us/i/photo1qv.png/)

Photo 2 (http://img830.imageshack.us/i/photovt.png/)

And here the code
function CheckLogin(LoginCorrect)
{
GW.Panel = new Ext.Panel
({
fullscreen: true,
layout: 'auto',
backText: 'Back',
useTitleAsBackText: true,
dockedItems:
[{
dock: 'top',
xtype: 'toolbar',
scroll: false,
items:
[{
xtype: 'list',
store: GW.Store,
itemTpl: '{firstName}{LastName}'
}]
}]
});

GW.List = new Ext.List
({
width : 200,
height : 300,
margin : '48 0 0 0',
fullscreen : true,
itemTpl : '{firstName} {lastName}',
store : GW.Store,
multiSelect : true,
onItemDisclosure:
{

}
});
GW.List.show();

}

and

Ext.ns('FWM', 'GW');
GW.LoginForm =
{
scroll : 'vertical',
standardSubmit : false,
items :
[{
xtype : 'fieldset',
title : 'FreightWare Mobile Login',
instructions : 'Log hier in met uw FWMobile account.',
defaults :
{
required : true,
labelAlign : 'left',
labelWidth : '40%'
},
items:
[{
xtype : 'textfield',
name : 'name',
label : 'Name',
useClearIcon : true,
autoCapitalize : false
},{
xtype : 'passwordfield',
name : 'password',
label : 'Password',
useClearIcon : false
}]
}],
dockedItems:
[{
xtype : 'toolbar',
dock : 'bottom',
layout : 'card',
items:
[{
text : 'Login to FreightWare Mobile',
ui : 'action',
handler : function (record)
{
LoginUserName = form.getValues().name;
LoginPassWord = form.getValues().password;
LoginCorrect = true;
if(LoginUserName == "test" && LoginPassWord == "1234")
{
LoginCorrect = true;
}
if(LoginCorrect == true)
{
form.hide();
Ext.regModel('Contact',
{
fields: ['firstName', 'lastName']
});
console.log(LoginUserName);
console.log(LoginPassWord);
GW.Store = new Ext.data.JsonStore
({
model: 'Contact',
proxy:
{
type : 'ajax',
url : 'GWService.svc/GWEndPoint/getPersons',
reader :
{
type: 'json',
root: 'getPersonsResult'
},
actionMethods:
{
create : 'POST',
read : 'POST',
update : 'POST',
destroy : 'POST'
},
extraParams:
{
loginUserName:LoginUserName,
loginPassWord:LoginPassWord
}

},
autoLoad: true
});
GW.Store.load();
CheckLogin(LoginCorrect);
console.log(LoginUserName);
console.log(LoginPassWord);
console.log(GW.Store);
}
else
{
Ext.Msg.alert('Error','Username/password incorrect!', Ext.emptyFn);
}
}
}]
}]
};

if (Ext.is.Phone)
{
GW.LoginForm.fullscreen = true;
}
else
{
Ext.apply(GW.LoginForm,
{
autoRender : true,
floating : true,
modal : true,
centered : true,
hideOnMaskTap : false,
height : 385,
width : 480
});
}

[ChillsNL]

Bump, isn't there anywone who can help me?

[realjax]

Bump, isn't there anywone who can help me?

Unfortunately, the Sencha team is busy relaxing from being busy releasing other products.

seriously though: Why don't you try making the list not an item of a dockedItem but of the panel instead. Works much better that way.

[nabulaer]

Hi,
It looks like you are creating 2 lists. 1 that is docked to the panel and another one that is shown full screen.
you should use the GW.List you created as the toolbar item , and not use a second one.

[ChillsNL]

Hi,

Thanks for your answer. After a look at my code, it indeed looks like i'm having 2 lists shown at once. I will update my code an post the result later this day.

Thanks!