PDA

View Full Version : PR3: form.Panel isn't displayed?



teedev
21 Dec 2011, 2:28 AM
Hi I am using Sencha Touch PR3. I have a Panel which contains another Panel with html content and a form.Panel. The form.Panel contains a form.FieldSet. The panel with html content is displayed. But the form.Panel (=panelLogin) is not visible. Why? In Sencha Touch 1.x it works. Thanks in advance.



var fsLogIn = Ext.create('Ext.form.FieldSet', {
title : 'Enter login data',
items : [{
xtype : 'textfield',
name : 'sessionName',
label : 'Session'
}]

});

var panelLogin = Ext.create('Ext.form.Panel', {
standardSubmit : false,
items : [fsLogIn, {
xtype : 'button',
text : 'Login',
ui : 'action',
scope : this,
handler : function() {
panelLogin.submit();
},
}],

submit : function() {
//do something
}
});

Ext.define('VoteApp.view.LoginView', {
extend : 'Ext.Panel',
xtype : 'voteapp-loginview',
config : {
items : [{
xtype : 'panel',
html : 'Test',
height : 90
}, panelLogin]
},
});

mitchellsimoens
21 Dec 2011, 6:21 AM
I wouldn't use Ext.create outside of Ext.setup. I wouldn't use Ext.define inside of Ext.setup. You can simplify your code by combining into one:


Ext.define('VoteApp.view.LoginView', {
extend : 'Ext.Panel',
xtype : 'voteapp-loginview',

config : {
items : [
{
xtype : 'panel',
html : 'Test',
height : 90
},
{
xtype : 'formpanel',
items : [
{
xtype : 'fieldset',
title : 'Enter login data',
items : [
{
xtype : 'textfield',
name : 'sessionName',
label : 'Session'
},
{
xtype : 'button',
text : 'Login',
ui : 'action',
handler : function(btn) {
var form = btn.up('formpanel');

form.submit();
}
}
]
}
]
}
]
}
});

But the problem is your form needs a height either by setting the height config on the formpanel or by using a layout. I would choose to use a layout:


Ext.define('VoteApp.view.LoginView', {
extend : 'Ext.Panel',
xtype : 'voteapp-loginview',

config : {
layout : {
type : 'vbox',
align : 'stretch'
},
items : [
{
xtype : 'panel',
html : 'Test',
height : 90
},
{
xtype : 'formpanel',
flex : 1,
items : [
{
xtype : 'fieldset',
title : 'Enter login data',
items : [
{
xtype : 'textfield',
name : 'sessionName',
label : 'Session'
},
{
xtype : 'button',
text : 'Login',
ui : 'action',
handler : function(btn) {
var form = btn.up('formpanel');

form.submit();
}
}
]
}
]
}
]
}
});

Please notice the lines in red. Now you should be able to see the form.

teedev
28 Dec 2011, 6:09 AM
Great, this works!

But this little thing isn't working anymore (works in 1.x)


{
xtype : 'textfield',
name : 'sessionName',
label : 'Session',
value : 'ABC'
}


This sets the default text of the textfield to ABC. The user can modify it. But


form.getFields('sessionName').getValue();always returns ABC. The user input is ignored.

Second bug: The form can't be posted with if you hit the enter/return key while the textfield has the focus.

mitchellsimoens
28 Dec 2011, 6:19 AM
The getValue is an open bug against PR3: http://www.sencha.com/forum/showthread.php?161412