PDA

View Full Version : Textfield Issue with Width



kreid
2 Jun 2015, 10:46 AM
I'm currently reviewing the migration effort of our mobile application (Sencha Touch 2.4) to the new ExtJs 6.0 framework.


I'm not sure if this is an issue but I'm having issues with the textfield. Regardless of what width setting and value I use, it appears the textfield is always the same width. I'm always able to type in 20 characters regardless. I'm also able to type in additional characters but the textfield appears to scroll to show the newly typed in characters.





Ext.define('RentalStatDueDiligence.view.login.LoginView', { extend: 'Ext.Container',
xtype: 'loginview',
controller: 'loginview',


config: {
itemId: 'loginView',
name: 'loginView',
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: [
{
xtype: 'fieldset',
itemId: 'fsLogin',
name: 'fsLogin',
title: 'Login',
width: '450px',
items: [
{
xtype: 'titlebar',
docked: 'top',
width: '450px',
},
{
xtype: 'textfield',
itemId: 'tfUserId',
name: 'tfUserId',
reference: 'userid',
placeHolder: 'UserId',
width: '450px',
clearIcon: false,
style: 'text-transform: lowercase;'
},
{
xtype: 'passwordfield',
itemId: 'tfPassword',
name: 'tfPassword',
reference: 'password',
width: '450px',
placeHolder: 'Password'
},
{
xtype: 'textfield',
itemId: 'tfServer',
name: 'tfServer',
reference: 'server',
width: '450px'
},
{
xtype: 'button',
itemId: 'btnLogin',
name: 'btnLogin',
reference: 'login',
text: 'Login',
ui: 'action',
margin: '20 0 0 0',
handler: 'onLoginButtonTap'
}


]
}

]
}








});

mitchellsimoens
3 Jun 2015, 4:15 AM
Tried this and it has the fields at 450px:


Ext.define('RentalStatDueDiligence.view.login.LoginView', {
extend: 'Ext.Container',
xtype: 'loginview',

//controller: 'loginview',

config: {
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
items: [{
xtype: 'fieldset',
title: 'Login',
width: 450,
items: [{
xtype: 'titlebar',
docked: 'top',
width: 450
}, {
xtype: 'textfield',
name: 'tfUserId',
reference: 'userid',
placeHolder: 'UserId',
width: 450,
clearIcon: false,
style: 'text-transform: lowercase;'
}, {
xtype: 'passwordfield',
name: 'tfPassword',
reference: 'password',
width: 450,
placeHolder: 'Password'
}, {
xtype: 'textfield',
name: 'tfServer',
reference: 'server',
width: 450
}, {
xtype: 'button',
name: 'btnLogin',
reference: 'login',
text: 'Login',
ui: 'action',
margin: '20 0 0 0',
handler: 'onLoginButtonTap'
}]
}]
}
});

kreid
3 Jun 2015, 5:47 AM
Thanks for your response. I'm sorry I forgot to add this to my original post. It works fine on a desktop. The problem arises when building native and viewing in iPad emulators.