You found a bug! We've classified it as EXTJSIII-71 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jsundquist2 is on a distinguished road

      0  

    Default [ExtJS 3.4] radio groups displaying in correctly within accordion panel

    [ExtJS 3.4] radio groups displaying in correctly within accordion panel


    As the title states we found an issue within ExtJS 3.4 while displaying an accordion panel within a form. If you have a radio group on the first panel and second; the first panel will display as you expect while the second panel displays in correctly. It appears as though the width css is not being applied to the div holding the radio buttons. Here is a sample code.

    Ext version tested:
    Ext 3.4

    Browser versions tested against:
    * IE9
    * FF13 (firebug 1.9.2)

    DOCTYPE tested against:
    Any

    Description:
    When using an accordion panel within a form panel radio buttons not located on the first panel are displayed in correctly. Normally radio buttons will space themselves out evenly within the allotted space give for the radio group field. In this case they appear to be stacked on top of each other and not spacing out as they do on the first panel.

    Steps to reproduce the problem:
    use below sample code

    The result that was expected:
    Every accordion panel after the first one should display as expected

    The result that occurs instead:
    The radio buttons display stacked on top of each other

    Test Case:
    See code below

    Code:
    Ext.onReady(function(){
        Ext.QuickTips.init();
    
        Ext.form.Field.prototype.msgTarget = 'side';
    
        var button = Ext.get('show-btn');
    
        var store = new Ext.data.ArrayStore({
            fields: ['abbr', 'state', 'nick'],
            data : [
            ['AL', 'Alabama', 'The Heart of Dixie'],
            ['AK', 'Alaska', 'The Land of the Midnight Sun'],
            ['AZ', 'Arizona', 'The Grand Canyon State'],
            ['AR', 'Arkansas', 'The Natural State'],
            ['CA', 'California', 'The Golden State'],
            ['CO', 'Colorado', 'The Mountain State'],
            ['CT', 'Connecticut', 'The Constitution State'],
            ['DE', 'Delaware', 'The First State'],
            ['DC', 'District of Columbia', "The Nation's Capital"],
            ['FL', 'Florida', 'The Sunshine State'],
            ['GA', 'Georgia', 'The Peach State']
        ]
        });
    
        var form = new Ext.form.FormPanel({
            frame: true,
            padding: 10,
            labelAlign: 'right',
            labelWidth: 120,
            defaults: {
                xtype: 'textfield',
                width: 500
            },
            items: [{
                xtype: 'panel',
                layout: 'accordion',
                autoWidth: true,
                height: 400,
                activeTab: 0,
                plain: true,
                items: [{
                    xtype: 'panel',
                    title: 'Basic Data',
                    height: 350,
                    items: [{
                        xtype: 'fieldset',
                        width: '100%',
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: 'Name',
                            allowBlank: false,
                            enableKeyEvents: true, 
                            width: 250
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Address',
                            allowBlank: false, 
                            width: 250
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'City',
                            allowBlank: false, 
                            width: 250
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'State',
                            allowBlank: false, 
                            width: 250
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'Postal Code',
                            allowBlank: false, 
                            width: 250
                        }]
                    },
                    {
                        xtype: 'fieldset',
                        width: '100%',
                        items: [{
                            fieldLabel: 'Like popcorn',
                            xtype: 'radiogroup',
                            allowBlank: false,
                            width: 250,
                            items: [{
                                name: 'popcorn',
                                boxLabel: 'No',
                                inputValue: 'no',
                                xtype: 'radio'
                            },{
                                name: 'popcorn',
                                boxLabel: 'Yes',
                                inputValue: 'yes',
                                xtype: 'radio'
                            }]
                        }]
                    }]
                },{
                    xtype: 'panel',
                    title: 'More Data',
                    height: 350,
                    items: [{
                        xtype: 'fieldset',
                        width: '100%',
                        items: [{
                            fieldLabel: 'Like popcorn',
                            xtype: 'radiogroup',
                            allowBlank: false,
                            width: 250,
                            items: [{
                                name: 'popcorn',
                                boxLabel: 'No',
                                inputValue: 'no',
                                xtype: 'radio'
                            },{
                                name: 'popcorn',
                                boxLabel: 'Yes',
                                inputValue: 'yes',
                                xtype: 'radio'
                            }]
                        },{
                            xtype: 'textfield',
                            fieldLabel: 'favorite color',
                            allowBlank: false,
                            width: 250
                        },{
                            xtype: 'combo',
                            fieldLabel: 'combo test',
                            store: store,
                            displayField:'state',
                            typeAhead: true,
                            mode: 'local',
                            forceSelection: true,
                            triggerAction: 'all',
                            allowBlank: false,
                            width: 250
                        }]
                    }]
                }]
            }],
            buttons: [{
                text: 'cancel'
            },{
                text: 'submit',
                handler: function(){
                    form.getForm().clearInvalid();
                    form.getForm().isValid();
                }
            }]
        });
        
        var window = new Ext.Window({
            layout: 'fit',
            title: '',
            modal: true,
            skipButtons: true,
            items: [
                new Ext.Panel({
                    autoScroll: true,
                    width: 595,
                    items: form
                })
            ],
            width: 600,
            autoScroll: false,
            resizable: false,
            closable: false,
            draggable: false,
            plain: true
        });
        
        button.on('click',function(){
            window.show(this);
        });
    });
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Panel</title>
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />
    
        <!-- GC -->
         <!-- LIBS -->
         <script type="text/javascript" src="js/ext-base.js"></script>
         <!-- ENDLIBS -->
    
        <script type="text/javascript" src="js/ext-all.js"></script>
    
        <script type="text/javascript" src="js/accordion-form.js"></script>
    
    </head>
    <body>
    <input type="button" id="show-btn" value="Diplay Form" />
    
    </body>
    </html>

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,546
    Vote Rating
    873
    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


    What I am seeing, and tell me if I am on the wrong track, but the div.x-column-inner is getting the 250px width. This div is the wrapping div for the radio component.

    Walking up the DOM some more to the div.x-form-item which is the top level element for the radio group. It doesn't have a width but takes up 100% of the width of it's parent (the fieldset).

    I would expect it to only have a width of 250px, is that what you are reporting?
    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 2012
    Posts
    5
    Vote Rating
    0
    jsundquist2 is on a distinguished road

      0  

    Default


    Updated the above post so that it follows the correct bug reporting format.

    To answer your question, if you set the width of a radio group the radio buttons within the group spread themselves out evenly within the first panel. Looking at any panel there after they do not spread themselves out.

    So if you set the width of the radio group to 250px I would expect both radio buttons within them to have a width of 125px. You will notice that this is happening as expected within the first panel. However this same width is not being applied to the second panel.

    Here is how ExtJS formats the first accordion correctly vs the in correct format.

    Correct
    HTML Code:
    <div style="padding-left:125px" id="x-form-el-ext-comp-1012" class="x-form-element">
        <div id="ext-comp-1012" class=" x-form-radio-group x-column-layout-ct x-form-field" style="width: 250px;">
            <div class="x-column-inner" id="ext-gen64" style="width: 250px;">
                <div id="ext-comp-1024" class=" x-column" style="width: 125px;">
                    <div tabindex="-1" class="x-form-item  x-hide-label" id="ext-gen68">
                        <label class="x-form-item-label" style="width:100px;" for="ext-comp-1025" id="ext-gen69"></label>
                        <div style="padding-left:105px" id="x-form-el-ext-comp-1025" class="x-form-element">
                            <div class="x-form-check-wrap" id="ext-gen70" style="width: 125px;">
                                <input type="radio" name="popcorn" id="ext-comp-1025" autocomplete="off" class=" x-form-radio x-form-field" value="no">
                                <label class="x-form-cb-label" for="ext-comp-1025" id="ext-gen71">No</label>
                            </div>
                        </div>
                        <div class="x-form-clear-left"></div>
                    </div>
                </div>
                <div id="ext-comp-1026" class=" x-column" style="width: 125px;">
                    <div tabindex="-1" class="x-form-item  x-hide-label" id="ext-gen72">
                        <label class="x-form-item-label" style="width:100px;" for="ext-comp-1027" id="ext-gen73"></label>
                        <div style="padding-left:105px" id="x-form-el-ext-comp-1027" class="x-form-element">
                            <div class="x-form-check-wrap" id="ext-gen74" style="width: 125px;">
                                <input type="radio" name="popcorn" id="ext-comp-1027" autocomplete="off" class=" x-form-radio x-form-field" value="yes">
                                <label class="x-form-cb-label" for="ext-comp-1027" id="ext-gen75">Yes</label>
                            </div>
                        </div>
                        <div class="x-form-clear-left"></div>
                    </div>
                </div>
                <div class="x-clear" id="ext-gen65"></div>
            </div>
        </div>
    </div>
    Incorrect
    HTML Code:
    <div style="padding-left:125px" id="x-form-el-ext-comp-1015" class="x-form-element">
        <div id="ext-comp-1015" class=" x-form-radio-group x-column-layout-ct x-form-field" style="width: 250px;">
            <div class="x-column-inner" id="ext-gen87">
                <div id="ext-comp-1029" class=" x-column">
                    <div tabindex="-1" class="x-form-item  x-hide-label" id="ext-gen91">
                        <label class="x-form-item-label" style="width:100px;" for="ext-comp-1030" id="ext-gen92"></label>
                        <div style="padding-left:105px" id="x-form-el-ext-comp-1030" class="x-form-element">
                            <div class="x-form-check-wrap" id="ext-gen93">
                                <input type="radio" name="popcorn" id="ext-comp-1030" autocomplete="off" class=" x-form-radio x-form-field" value="no">
                                <label class="x-form-cb-label" for="ext-comp-1030" id="ext-gen94">No</label>
                            </div>
                        </div>
                        <div class="x-form-clear-left"></div>
                    </div>
                </div>
                <div id="ext-comp-1031" class=" x-column">
                    <div tabindex="-1" class="x-form-item  x-hide-label" id="ext-gen95">
                        <label class="x-form-item-label" style="width:100px;" for="ext-comp-1032" id="ext-gen96"></label>
                        <div style="padding-left:105px" id="x-form-el-ext-comp-1032" class="x-form-element">
                            <div class="x-form-check-wrap" id="ext-gen97"><input type="radio" name="popcorn" id="ext-comp-1032" autocomplete="off" class=" x-form-radio x-form-field" value="yes">
                            <label class="x-form-cb-label" for="ext-comp-1032" id="ext-gen98">Yes</label>
                        </div>
                    </div>
                    <div class="x-form-clear-left"></div>
                </div>
            </div>
            <div class="x-clear" id="ext-gen88"></div>
        </div>
    </div>

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,546
    Vote Rating
    873
    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're right and this is my bad. I forgot that the bug happens in the 2nd panel, was just going off the first panel.

    Pushing this up to Jira.
    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.

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jsundquist2 is on a distinguished road

      0  

    Default


    This bug was reported in July and I know you are currently working on some 4.1 fixes. Just curious as to if this has been looked at or what the status of it is. We will be hitting live customers soon and would like to let management know that something is in the works.

    Thanks.

  6. #6
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jsundquist2 is on a distinguished road

      0  

    Default


    Any updates?

Thread Participants: 1