1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    48
    Vote Rating
    1
    teedev is on a distinguished road

      0  

    Default PR3: form.Panel isn't displayed?

    PR3: form.Panel isn't displayed?


    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.

    Code:
    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]
        },
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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:

    Code:
    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:

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    48
    Vote Rating
    1
    teedev is on a distinguished road

      0  

    Default


    Great, this works!

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

    Code:
    {
            xtype : 'textfield',
            name : 'sessionName',
            label : 'Session',
            value : 'ABC'
    }
    This sets the default text of the textfield to ABC. The user can modify it. But

    Code:
    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The getValue is an open bug against PR3: http://www.sencha.com/forum/showthread.php?161412
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1