Threaded View
-
13 Jul 2012 7:27 AM #1
[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>
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.


Reply With Quote