1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    12
    Vote Rating
    0
    Answers
    1
    Dano_Cuba is on a distinguished road

      0  

    Default Answered: formpanel within fieldset not working...

    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
    773
    Vote Rating
    28
    Answers
    7
    Steffen Hiller will become famous soon enough Steffen Hiller will become famous soon enough

      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
    Vote Rating
    0
    Answers
    1
    Dano_Cuba is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    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


    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 @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.

  6. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    12
    Vote Rating
    0
    Answers
    1
    Dano_Cuba is on a distinguished road

      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
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    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


    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 @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.

  9. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    12
    Vote Rating
    0
    Answers
    1
    Dano_Cuba is on a distinguished road

      0  

    Default


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

    Great!
    Thanks!!