Ext React Segmented button throws an error when provided a value

Question

I'm using ExtReact and I have a SegmentedButton. Based on the kitchen sink example I should be able to provide the SegmentedButton with a value, but when I try with the following code I get an error

Invalid value "28800" for segmented button: "ext-segmentedbutton-1"

Here is the code, I've also included the Sencha fiddle

import React, { Component } from 'react';
import { launch} from '@sencha/ext-react';
import ExtReactDOM from '@sencha/ext-react-modern';
import { ExtContainer, ExtPanel, ExtLabel, ExtButton, SegmentedButton } from '@sencha/ext-react-modern';

const MINUTES_5_IN_SECONDS = 5 * 60;
const MINUTES_30_IN_SECONDS = 30 * 60;
const HOURS_2_IN_SECONDS = 2 * 60 * 60;
const HOURS_8_IN_SECONDS = 8 * 60 * 60;
const HOURS_24_IN_SECONDS = 24 * 60 * 60;

class App extends Component {

    state = {
        secondsOfHistory: HOURS_2_IN_SECONDS,
    }

    handleTimeFrameChange = (value) => {
        console.log(value);
        this.setState({
            secondsOfHistory: value
        });
        this.props.handleTimeFrameChange(value);
    }


    render() {
        return (
            <ExtContainer layout="fit" padding={10} fullscreen>
                <ExtPanel title="ExtReact" bodyPadding={10} shadow>
                    <SegmentedButton
                        value={'28800'}
                    >
                    <ExtButton
                        text={'24 Hours'}
                        value={HOURS_24_IN_SECONDS}
                    />
                    <ExtButton
                        text={'8 Hours'}
                        value={HOURS_8_IN_SECONDS}
                    />
                    <ExtButton
                        text={'2 Hours'}
                        value={HOURS_2_IN_SECONDS}
                    />
                    <ExtButton
                        text={'30 Minutes'}
                        value={MINUTES_30_IN_SECONDS}
                    />
                    <ExtButton
                        text={'5 Minutes'}
                        value={MINUTES_5_IN_SECONDS}
                    />
                </SegmentedButton>
                </ExtPanel>
            </ExtContainer>
        )
    }
}

ExtReactDOM.render(<App />, document.body);

Here's the Fiddle

If I remove the 'value' option the page will render but the button set will have nothing selected. Why does it throw the error?

As an aside, I've been really unimpressed with ExtJS and ExtReact. I've been developing for years in multiple JS frameworks and ExtJS, while it has some amazing widgets, has been incredibly frustrating to get the simplest things done. Has anyone else had this experience?

score 0 · Answer 1 · answered May 06 '20 at 08:08

You can set pressed in a child component like:

 render() {
        return (
            <ExtContainer layout="fit" padding={10} fullscreen>
                <ExtPanel title="ExtReact" bodyPadding={10} shadow>
                    <SegmentedButton>
                    <ExtButton
                        text={'24 Hours'}
                        value={HOURS_24_IN_SECONDS}
                        pressed
                    />
                    <ExtButton
                        text={'8 Hours'}
                        value={HOURS_8_IN_SECONDS}
                    />
                    <ExtButton
                        text={'2 Hours'}
                        value={HOURS_2_IN_SECONDS}
                    />
                    <ExtButton
                        text={'30 Minutes'}
                        value={MINUTES_30_IN_SECONDS}
                    />
                    <ExtButton
                        text={'5 Minutes'}
                        value={MINUTES_5_IN_SECONDS}
                    />
                </SegmentedButton>
                </ExtPanel>
            </ExtContainer>
        )
    }

Take a look on example: https://fiddle.sencha.com/#view/editor&fiddle/35pd

Ext React Segmented button throws an error when provided a value

1 Answers1