ExtJs , How to create Tracking/Steps Bar

Question

I want to create steps or tracking bar in Sencha ExtJS Classic as the following images

what is the best way to implement this in ExtJS Classic?

each step have to be clickable

Answer 1

You can start with:

@example: https://fiddle.sencha.com/#view/editor&fiddle/274i

Or you start your own like this:

xtype: breadcrumb

example: https://fiddle.sencha.com/#view/editor&fiddle/31vu

Other than that you can also start with the segmentedbutton and use css ::after to add the colored line.

In the past I did this one time and it turned out to be a lot of work. We used layout: 'hbox' and used buttons.

The main problem was to add the logic to allow step back still keeping information, add logic after each step separately and make this a full "wizzard-component".