PDA

View Full Version : Radio button groups reset in IE when CP removed/added



zarickj
26 Apr 2007, 7:55 PM
Recent posts have inspired me to attempt to create a wizard variation of the BorderLayout object. Basically, I have an array of ContentPanels that I swap in and out of the layout with remove/add with preservePanels set to true.

It seems to work fine in FF, but in IE (6/7) it radio buttons have issues. The radio button groups in each CP seem to be getting reset when the CP is re-added to the layout due to next/back navigation. All other input types seem to work fine.

Below is the code. Any help/suggestions would be greatly appreciated. Thanks!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Radio Button Issue</title>

<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/ext/resources/css/ytheme-aero.css" />

<script type="text/javascript" src="http://www.extjs.com/deploy/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/ext/ext-all-debug.js"></script>

<style type="text/css">

.wiz-panel {
background-color:#EDE6E6;
}

</style>


<script type="text/javascript">

// WizardLayout class
function WizardLayout(el, config) {

// save copy of container element for later reference
var container = el;

WizardLayout.superclass.constructor.call(this, el, config);

// initilization function
this.init = function() {

// keep list of panels
this.panels = new Array();

// convert divs to CPs
this.registerPanels();

// update layout
this.beginUpdate();
this.add('south', new Ext.ContentPanel('wizNav', {closable: false}));
this.add('center', this.panels[this.currentPanel]);
this.endUpdate();

// create EXTJS buttons
this.btnBack = new Ext.Button('btnBack', {text: '<- Back', disabled:true});
this.btnNext = new Ext.Button('btnNext', {text: 'Next ->'});
this.btnCancel = new Ext.Button('btnCancel', {text: 'Cancel'});

// add listeners to next/back buttons
this.btnNext.addListener('click',this.next, this);
this.btnBack.addListener('click',this.back, this);

};

// RegisterPanels: convert divs of class wiz-panel to CPs, load into panels array
this.registerPanels = function() {

var panelDivs = YAHOO.util.Dom.getElementsByClassName("wiz-panel", "div", container);

var i=0;
while (i < panelDivs.length) {
this.panels.push( new Ext.ContentPanel(panelDivs[i].id, {closable: false}));
i++;
}

// set current panel pointer
this.currentPanel = 0;

};

// handle next click, remove current panel, add next panel in panels array
this.next = function() {

this.remove('center',this.panels[this.currentPanel]);

this.btnBack.enable();

if (this.currentPanel < this.panels.length - 1) {
this.currentPanel++;
} else {
this.currentPanel = this.panels.length - 1;
}

if (this.currentPanel >= this.panels.length - 1) {
this.btnNext.disable();
} else {
this.btnNext.enable();
}

this.add('center',this.panels[this.currentPanel]);

};

// handle back click, remove current panel, add previous panel in panels array
this.back = function() {

this.remove('center',this.panels[this.currentPanel]);

if (this.currentPanel <= 0) {
this.currentPanel=0;
} else {
this.currentPanel--;
}

if (this.currentPanel <= 0) {
this.btnBack.disable();
this.btnNext.enable();
} else {
this.btnBack.enable();
this.btnNext.disable();
}

this.add('center', this.panels[this.currentPanel]);
this.layout();

};

};

Ext.extend(WizardLayout, Ext.BorderLayout);


function init() {

var wiz1 = new WizardLayout(document.body, {
south: {
split:false,
initialSize: 50,
minSize: 50,
maxSize: 50,
titlebar: false,
collapsible: false,
animate: false,
preservePanels: true
},
center: {
titlebar: false,
autoScroll:true,
closeOnTab: false,
preservePanels: true // keeps panels from being destroyed on remove
}
});

wiz1.init();

};

Ext.EventManager.onDocumentReady(init);

</script>

</head>
<body>

<div id="wizPanel_1" class="x-layout-inactive-content wiz-panel">

<h1>Step 1 of 2&nbsp;&nbsp;&nbsp;Options</h1>
<br><br>

<h2>Radios</h2>
<hr>
<input type="radio" name="radio1" id="radio1_1" value="1" /> Option 1&nbsp;&nbsp;&nbsp;
<input type="radio" name="radio1" id="radio1_2" value="2" /> Option 2
<br>
Enter some text: <input type="text" id="text1">
<br>
<input type="checkbox" id="chk1"> Check it

</div>


<div id="wizPanel_2" class="x-layout-inactive-content wiz-panel">

<h1>Step 2 of 2&nbsp;&nbsp;&nbsp;More Options</h1>
<br><br>

<h2>More Radios</h2>
<hr>
<input type="radio" name="radio2" value="1"> Option 1 more&nbsp;&nbsp;&nbsp;
<input type="radio" name="radio2" value="2"> Option 2 more
<br>
Enter some more text: <input type="text" id="text2">
<br>
<input type="checkbox" id="chk2"> Check it, again

</div>

<div id="wizNav" class="x-layout-inactive-content wiz-nav">
<div id="btnBack" style="float:left;"></div>
<div id="btnNext" style="float:left;"></div>
<div id="btnCancel" style="float:left;"></div>
</div>

</body>

</html>

zarickj
27 Apr 2007, 6:13 PM
Here is a link to the above code:

http://dev.zarick.net/radio_issue.html

falcondot
28 Jun 2007, 12:19 AM
Hi zarickj,

did u got any solution for ur problem, i am facing almost same problem in case of accordion of Jozef .....when i collapse a InfoPanel(extended from ContentPanel) my checkbox's inside the InfoPanel gets unchecked(unselected) and i am not able to figure out whts the problem


Regards
Gaurav

zarickj
29 Jun 2007, 5:02 AM
I have not found a solution yet, I got busy with other things and haven't got back working on that project. Hopefully soon I will dig back into it soon. Have you made a seperate Help post about your check box problems with the InfoPanel/Accordion? Those User Extensions seem to be drawing a lot of attention right now, so somebody might have run into the same issue.

nico
16 Aug 2007, 3:51 AM
Set animate to off as a workaround. Seems to be related to animation anyhow.

Nico