[CLOSED] Form.reset() doesnt reset segmentedbutton

  1. #1

    [CLOSED] Form.reset() doesnt reset segmentedbutton

    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>
    Last edited by fabricio.murta; Apr 25, 2022 at 8:21 PM.
  2. #2
    Hello @Z!

    I believe the same reply from your (actually next) other question 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, just for reference).
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I will use the hidden variable and reset the buttons manually
    /Z
  4. #4
    Thanks for the feedback! I hope our last messages helped!
    Last edited by fabricio.murta; Apr 25, 2022 at 8:21 PM.

Similar Threads

  1. form.reset() && daterange Error
    By threewonders in forum 1.x Help
    Replies: 1
    Last Post: Mar 28, 2012, 11:28 AM
  2. [1.0] Reset Dataview
    By walle in forum 1.x Help
    Replies: 2
    Last Post: Nov 25, 2010, 11:47 AM
  3. [CLOSED] How to reset ascx form from it's container?
    By dev in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 21, 2010, 9:15 PM
  4. [CLOSED] Form reset not working
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 22, 2010, 7:01 AM
  5. Form inside window reset issue
    By sz_146 in forum 1.x Help
    Replies: 0
    Last Post: Feb 03, 2009, 12:50 PM

Posting Permissions