Results 1 to 8 of 8

Thread: formpanel within fieldset not working...

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: formpanel within fieldset not working...

    Hi all.

    I'm trying to put a radio button, but it's not working to me. I used a formpanel like documentation show to radio field, but when i try to see it in a fieldset, i see the other field but not the radio buttons.

    Any body can tell me what is wrong in my code:

    Code:
    Ext.define('MyFirstSencha.view.Contact', {
        extend:'Ext.form.FieldSet',
        xtype: 'contactform',
        
        config:{
            title: 'Contact',
            layout : 'vbox',
            iconCls: 'user',
    
    
            items: [
                {
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'    
                },
                {
                    xtype: 'emailfield',
                    name: 'email',
                    label: 'Email'    
                },
                {
                    xtype: 'textareafield',
                    name: 'message',
                    label: 'Message'    
                },
                {
                    xtype: 'formpanel',
                    config: { 
                        title: 'Radios',
                        layout: 'vbox',                    
                        items: [
                                    {
                                        xtype: 'radiofield',
                                        name : 'color',
                                        value: 'red',
                                        label: 'Red',
                                        checked: true
                                    },
                                    {
                                        xtype: 'radiofield',
                                        name : 'color',
                                        value: 'green',
                                        label: 'Green'
                                    },
                                    {
                                        xtype: 'radiofield',
                                        name : 'color',
                                        value: 'blue',
                                        label: 'Blue'
                                    }
                                ]
                    }
                }
            ]
        }
    });
    I tried wtith differents layout but nothing changes!!

  2. Didn't notice that config object, that was an issue. This works for me:

    Code:
    Ext.define('MyFirstSencha.view.Contact', {
        extend : 'Ext.form.FieldSet',
        xtype  : 'contactform',
    
        config : {
            title   : 'Contact',
            layout  : 'vbox',
            iconCls : 'user',
    
            items : [
                {
                    xtype : 'textfield',
                    name  : 'name',
                    label : 'Name'
                },
                {
                    xtype : 'emailfield',
                    name  : 'email',
                    label : 'Email'
                },
                {
                    xtype : 'textareafield',
                    name  : 'message',
                    label : 'Message'
                },
                {
                    xtype  : 'formpanel',
                    flex   : 1,
                    title  : 'Radios',
                    items  : [
                        {
                            xtype   : 'radiofield',
                            name    : 'color',
                            value   : 'red',
                            label   : 'Red',
                            checked : true
                        },
                        {
                            xtype : 'radiofield',
                            name  : 'color',
                            value : 'green',
                            label : 'Green'
                        },
                        {
                            xtype : 'radiofield',
                            name  : 'color',
                            value : 'blue',
                            label : 'Blue'
                        }
                    ]
                }
            ]
        }
    });

  3. #2
    Ext JS Premium Member Steffen Hiller's Avatar
    Join Date
    Mar 2008
    Posts
    786
    Answers
    7
    Vote Rating
    36
      0  

    Default

    You should put fieldsets within forms, not the other way around.

    Try removing the formpanel around your radio fields:
    http://www.senchafiddle.com/#f3PQN (Press Run)

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Hi, Steffen, thanks for reply.

    I know this is a way, in fact this works to me earlier, but i just want a panel surrounding the radio buttons, to give it a title, in this case "select color" for example, and to get this like one control, i don't want the red option in the same level of name.

    Am I clear? Do you have another solution?

    Thanks again!

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,323
    Answers
    3884
    Vote Rating
    1294
      0  

    Default

    You have "layout : 'vbox'" on your fieldset and need to give the formpanel a size so it can show. Give it flex : 1 and see where that gets you.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  6. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Hi Mitchell.

    Thanks for replying.

    I try with your advice (use flex: 1), but it not works, i can't see this formpanel.
    I was trying to use height and width in the formpane, because I remembered when you explain me some days ago about some controls need we specify the size explicit, but nothing happen,

    Another idea?

    Thanks in advance!

  7. #6
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    100
      0  

    Default

    Try this out:
    Code:
        
    Ext.define('MyFirstSencha.view.Contact', {
        extend:'Ext.form.FieldSet',
        xtype: 'contactform',  
        config: {
            title: 'Contact',
            layout : 'vbox',
            iconCls: 'user',
            items: [
                {
                    xtype: 'textfield',
                    name: 'name',
                    label: 'Name'    
                },
                {
                    xtype: 'emailfield',
                    name: 'email',
                    label: 'Email'    
                },
                {
                    xtype: 'textareafield',
                    name: 'message',
                    label: 'Message'    
                },
                {
                    xtype: 'fieldset',
                    //flex: 1, 
                    title: 'Radios',
                    //layout: 'vbox',                    
                    items: [
                        {
                            xtype: 'radiofield',
                            name : 'color',
                            value: 'red',
                            label: 'Red',
                            checked: true
                        },
                        {
                            xtype: 'radiofield',
                            name : 'color',
                            value: 'green',
                            label: 'Green'
                        },
                        {
                            xtype: 'radiofield',
                            name : 'color',
                            value: 'blue',
                            label: 'Blue'
                        }
                    ]   
                }
            ]
        }//end config
    });
    You had a 'config' in your formpanel that should not have been there, also I changed it to a fieldset and it works.

  8. #7
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,323
    Answers
    3884
    Vote Rating
    1294
      0  

    Default

    Didn't notice that config object, that was an issue. This works for me:

    Code:
    Ext.define('MyFirstSencha.view.Contact', {
        extend : 'Ext.form.FieldSet',
        xtype  : 'contactform',
    
        config : {
            title   : 'Contact',
            layout  : 'vbox',
            iconCls : 'user',
    
            items : [
                {
                    xtype : 'textfield',
                    name  : 'name',
                    label : 'Name'
                },
                {
                    xtype : 'emailfield',
                    name  : 'email',
                    label : 'Email'
                },
                {
                    xtype : 'textareafield',
                    name  : 'message',
                    label : 'Message'
                },
                {
                    xtype  : 'formpanel',
                    flex   : 1,
                    title  : 'Radios',
                    items  : [
                        {
                            xtype   : 'radiofield',
                            name    : 'color',
                            value   : 'red',
                            label   : 'Red',
                            checked : true
                        },
                        {
                            xtype : 'radiofield',
                            name  : 'color',
                            value : 'green',
                            label : 'Green'
                        },
                        {
                            xtype : 'radiofield',
                            name  : 'color',
                            value : 'blue',
                            label : 'Blue'
                        }
                    ]
                }
            ]
        }
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  9. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    12
    Answers
    1
    Vote Rating
    0
      0  

    Default

    It, works! True, the last problem was with the incorrect config.

    Great!
    Thanks!!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •