PDA

View Full Version : [CLOSED] Removing Checkboxes / Radiobuttons from Frompanel



extnetuser
Aug 27, 2013, 11:46 AM
Hi there,

a Formpanel gets populated dynamically with different Fields. However, when I try to remove all Fields in order to load a new / previous set, the
removeAll()method fails to remove the Checkboxes properly: the values of all removed checkboxes still get returned by
FormPanel.getForm().getValues()
Calling the removeAll() method for the corresponding checkboxgroups does the trick, though. But do I need to do this for every checkboxgroups and radiogroups explicitly or is there a better approach?


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript"">

function reloadPanel(formPanel) {
// clear the formpanel
formPanel.removeAll(true, true);
//App.Item_456_Group.removeAll(); // <- need to call this?

formPanel.add([
{ id: 'Item_456_Group', xtype: 'checkboxgroup', items: [
{ xtype: 'checkboxfield', name: 'Item_456', boxLabel: 'Input 1', inputValue: '1', uncheckedValue: '-1' },
{ xtype: 'checkboxfield', name: 'Item_456', boxLabel: 'Input 2', inputValue: '2', uncheckedValue: '-2' },
{ xtype: 'checkboxfield', name: 'Item_456', boxLabel: 'Input 3', inputValue: '3', uncheckedValue: '-3' },
{ xtype: 'checkboxfield', name: 'Item_456', boxLabel: 'Input 4', inputValue: '4', uncheckedValue: '-4' }
]},
{ id: 'Item_457', xtype: 'textfield' }
]);

console.log(formPanel.getForm().getValues());
}

</script>
</head>
<body>

@Html.X().ResourceManager()

@(Html.X().FormPanel()
.ID("FormPanel")
.Layout(LayoutType.Anchor)
.Title("FormPanel")
.TrackResetOnLoad(true)
.Buttons(
Html.X().Button().Text("Reload").OnClientClick("reloadPanel(App.FormPanel);")
)
.Items(
Html.X().CheckboxGroup().ID("Item_456_Group").Items(
Html.X().Checkbox().Name("Item_456").BoxLabel("Input 1").InputValue("1").UncheckedValue("-1"),
Html.X().Checkbox().Name("Item_456").BoxLabel("Input 2").InputValue("2").UncheckedValue("-2"),
Html.X().Checkbox().Name("Item_456").BoxLabel("Input 3").InputValue("3").UncheckedValue("-3"),
Html.X().Checkbox().Name("Item_456").BoxLabel("Input 4").InputValue("4").UncheckedValue("-4")
),

Html.X().TextField().ID("Item_457")
)
)

</body>
</html>

Kind regards,
extnetuser

Daniil
Aug 27, 2013, 2:11 PM
Hi @extnetuser,

I don't quite follow the scenario.

If run you test case and call

Ext.encode(App.FormPanel.getForm().getValues())
prior to removing items, it returns:

"{"Item_456":["-1","-2","-3","-4"],"Item_457":""}"

"-1", "-2", etc. are there, because it is uncheckedValues.

If call

App.FormPanel.removeAll();
Ext.encode(App.FormPanel.getForm().getValues())
it returns an empty object.

So, in your test case you remove all the items and revert them back, therefore the uncheckedValues are still returned bu the getValues call.

For references:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Checkbox-cfg-uncheckedValue

extnetuser
Aug 27, 2013, 2:46 PM
Hi Daniil,

thank you for your response. The unchecked value is intended and not related to the problem.

Please click several times on the Reload button in the example code.

Even though all items are removed from the FormPanel and added again you will find that the number of submitted checkboxes increases by four with every click on the button when calling the
getForm().getValues() method.

So initially four checkbox values are returned. After the first click, there are the current values and the previous four values returned in the array. After the third click, there are 12 values in the array...

Daniil
Aug 27, 2013, 3:55 PM
I cannot reproduce with the SVN trunk. Please clarify what Ext.NET version are you using?