[CLOSED] Form.reset() doesnt reset segmentedbutton

[Z]

In this example, i select a segmented button and it is highlighted. Using Form.getForm.reset() should clear my selection but it does not.
Please let me know best way to clear it and if you can please resolve for future.
thanks
/Z




<ext-formPanel
id="test123"
width="390"
x-defaultAnchor="100%">
<fieldDefaults>
<ext-add key="labelWidth" value="100" mode="Raw" />
</fieldDefaults>
<defaults>
<ext-add key="margin" value="0 0 10 0" />
</defaults>
<items>

<ext-fieldContainer fieldLabel="<b>test</b>" labelAlign="Top" >
<items>
<ext-segmentedButton >
<items>
<ext-button
text="11"
scale="Medium"
variant=Light
width="130"
iconAlign="Top"
/>
<ext-button
text="22"
width="130"
variant=Light
scale="Medium"
iconAlign="Top"
/>
<ext-button
text="33"
width="130"
scale="Medium"
variant=Light
iconAlign="Top"
/>
</items>
</ext-segmentedButton>
</items>
</ext-fieldContainer>
</items>
<buttons>
<ext-button text="Cancel" iconCls="x-md md-icon-cancel" variant="Danger" onClientClick="App.test123.getForm().reset();" />
</buttons>
</ext-formPanel>

[fabricio.murta]

Hello @Z!

I believe the same reply from your (actually next) other question (https://forums.ext.net/showthread.php?63256) applies here. The button is, well, a button, and not a form element. Resetting a form won't touch the component's state simply because it doesn't rely on any form input fields to keep up their state. It seems you are taking the component as a Radio Field, which makes sense. But implementation-wise, the Segmented Button is part of the Buttons (and extends it) component and does not employ an underlying form field when it is used.

You can think of it as a Panel, in this sense; you may reset the form but this won't mean you want the panel contents (its "value") completely erased.

What this question differs from your (next) other question, as far as understand, is that here you want not just the buttons to imply a change to the submitted form (as we suggested in the answer to said question); but also as the form field's value changes, the buttons state to follow it.

The response provided should work -- but to the context of this question, assuming you went with the option to create the (hidden?) form field, then that form field would have also a listener to which it would programmatically set the value in the segmented button in the Change listener; that is, when you clear the form, the field's value will turn empty, and thus it will "unclick" all buttons in the segmented group.

I hope this clears up the component's limitations (or rather, design), yet the directions allow you to take an acceptable course into implementing the solution the way you need it.

In case you decide with a solution (like the hidden form field) and can't make it work for any reason, let us know and we'll work on the test case you provided. Another solution you may want to consider is to use the Radio Field (just noticed we don't have an example using this component in Examples Explorer 7, but here's an example using it in v5 (https://examples5.ext.net/#/Form/Groups/Basic/), just for reference).

[Z]

I will use the hidden variable and reset the buttons manually
/Z

[fabricio.murta]

Thanks for the feedback! I hope our last messages helped!