PDA

View Full Version : Ext.data.Model.set() resetting HTML radio



Frith
9 Mar 2012, 3:32 AM
Scenario:
I have a grid using the excellent AsyncRowExpander (https://github.com/nickbretz/Ext.ux.AsyncRowExpander).

On row expand, I call a php script to return a html form with a number of radio button groups.

The user selects a score from 0 to 5 presented via these radio buttons. The onclick event calls a javascript function to aggregate the scores and update the record associated with the parent grid.

I will store the aggregated in the database using a further async call but I do not want to reload the parent grid as the rows will collapse.

Problem:
When I call the set method on the record, the selected radio button unchecks/clears. If I comment out the set method call, the radio button remains checked.

Any help greatly appreciated.




function storeScore(prnt, defn, elem) {
var tgt = document.getElementById('scoreholder-'+defn);
tgt.setAttribute('score', elem.value);

var hldr = document.getElementById('subsections-'+prnt);
var scores = hldr.getElementsByClassName('clsScoreHolder');
var aggscore = 0;
// Loop through elements to aggregate average score
for(s=0;s<scores.length;s++)
{
aggscore = aggscore + parseInt(scores[s].getAttribute('score'));
}

var score = (aggscore)/scores.length;
score = score/2;

rec = Ext.getCmp('gridDefs').getStore().findRecord('defnID', prnt);
// Update record to
rec.set('score', score); // Radio button (elem) unchecks here
rec.commit();

// TODO: write score to DB


}




Here is the nested output from the async call on row expand:


<div class="clsDefnHolder"><div class=clsScoreHolder id="scoreholder-3">
<table style="width: 100%;"> <!-- Override the average score using this radio group -->
<tr>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=0><br>Not Doing</td>
<td class=clsScore>&nbsp;</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=1><br>0.5</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=2><br>1.0</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=3><br>1.5</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=4><br>2.0</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=5><br>2.5</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=6><br>3.0</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=7><br>3.5</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=8><br>4.0</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=9><br>4.5</td>
<td class=clsScore><input onclick="storeScore(3,3, this);" type=radio name=score-3 value=10><br>5.0</td>
</tr>
</table>
</div>
</div>
<div id=subsections-3>
<div class="clsDefnHolder">
<table style="width: 100%;">
<tr>
<td class="clsDefnQuestion">2.2</td>
<td class="clsDefnTitle">Question Title</td>
</tr>
<tr>
<td class="clsDefnText" colspan=2>Question text goes here</td>
</tr>
<tr>
<td colspan=2>
<div score= class=clsScoreHolder id="scoreholder-5">
<table style="width: 100%;">
<tr>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=0><br>Not Doing</td>
<td class=clsScore>&nbsp;</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=1><br>0.5</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=2><br>1.0</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=3><br>1.5</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=4><br>2.0</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=5><br>2.5</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=6><br>3.0</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=7><br>3.5</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=8><br>4.0</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=9><br>4.5</td>
<td class=clsScore><input onclick="storeScore(3,5, this);" type=radio name=score-5 value=10><br>5.0</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<br>
<div class="clsDefnHolder">
<table style="width: 100%;">
<tr>
<td class="clsDefnQuestion">2.1</td>
<td class="clsDefnTitle">Question Title</td>
</tr>
<tr>
<td class="clsDefnText" colspan=2>Question text goes here</td>
</tr>
<tr>
<td colspan=2>
<div score= class=clsScoreHolder id="scoreholder-4">
<table style="width: 100%;">
<tr>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=0><br>Not Doing</td>
<td class=clsScore>&nbsp;</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=1><br>0.5</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=2><br>1.0</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=3><br>1.5</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=4><br>2.0</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=5><br>2.5</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=6><br>3.0</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=7><br>3.5</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=8><br>4.0</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=9><br>4.5</td>
<td class=clsScore><input onclick="storeScore(3,4, this);" type=radio name=score-4 value=10><br>5.0</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>

mitchellsimoens
9 Mar 2012, 8:33 AM
I can see this happening that the grid row is being refreshed because the data is updated.