Wizard for the advanced tab panel

Question

Wizard for the advanced tab panel

I am facing a challenge with my advanced TabPanel Wizard. It consists of 4 tabs, each serving as its own form to allow for validation within the tab itself. The issue I am encountering is related to the validation behavior of non-rendered tabs.

One problem is that a non-rendered tab incorrectly registers as valid even when it has an empty value and the field is set to allowBlank: false. Conversely, there are instances where a tab with a value set is marked as invalid.

Another quirk is that I need to call this.getViewModel().notify() when the tab panel loads to prevent the initial form from being deemed invalid. This could be due to binding delay, which I can manage for now.

While using deferredRender: false would resolve this issue, I prefer not to use it due to performance concerns in my application where each tab contains substantial content and functionality.

In a Fiddle example, only 3 out of 4 tabs are enabled despite the third tab having data from its model. This leads to incorrect validity checks triggering further methods.

Tab3 incorrectly thinks it's invalid despite having a value bound to it and allowBlank: false set
Tab4 wrongly appears valid while it should be marked as invalid without a value and allowBlank: false set

I'm seeking insights or suggestions on how to address these issues. Am I approaching this problem incorrectly?

javascript extjs extjs6

Answer 1

Answer №1

The reason this issue is occurring is due to the behavior of view models and binding not aligning with your expectations.

When you define a field like this:

{ fieldLabel: 'Value3', xtype: 'textfield', name: 'value2', allowBlank: false,
  bind: { value: '{model1.value2}' }
}

The field is initially created without a value because it has been bound instead of explicitly defined. The binding does not take effect immediately for performance reasons and typically binds after the tab is rendered, which explains why rendering the tab works for you.

As a result, when you check the validity of Tab 3, it fails because the values have not yet been bound. This becomes clearer if you modify the log statement on line 24 as follows:

console.log(form.owner.title, form.getValues(), form.owner.rendered, isValid)

With this adjustment, upon first rendering the tab panel, you will observe the following output (excluding comments):

afterrender // triggers the view model to notify.
activate
checking
tab1 Object {value: "blah"} true true  // Value bound because it was rendered.
tab2 Object {value: ""} false true
tab3 Object {value2: ""} false false // Value not bound because it is not rendered
checking
tab4 Object {} false true // No properties yet...

If you omit this.getViewModel().notify(), the output changes to:

afterrender
activate
checking
tab2 Object {} false true
tab3 Object {} false true
tab4 Object {} false true
tab1 Object {value: "blah"} true true

Note the difference in order.

Essentially, individual forms on the tabs remain dataless until their field values are bound. Without fields, they are deemed valid. Calling isValid prompts the fields to be defined but still not bound. Consequently, tab3 is considered invalid (lacking data binding), leading to tab 4 being disabled.

If you forego using viewModel.notify(), during the initial checkValidity() call, tab1 lacks data binding. Consequently, it is deemed invalid (having fields but no values), impacting tab2, and so forth.

The validation ultimately resolves itself, but checks only occur when transitioning from true to false, not vice versa, influencing the observed behavior.

To rectify this situation, there are likely multiple approaches available. One effective method involves extracting values from the viewModel during panel initComponent and explicitly assigning them to the fields during creation. This ensures they start with the correct state, enabling them to pass the validity assessment immediately.

Answer 2

The reason this issue is occurring is due to the behavior of view models and binding not aligning with your expectations.

When you define a field like this:

{ fieldLabel: 'Value3', xtype: 'textfield', name: 'value2', allowBlank: false,
  bind: { value: '{model1.value2}' }
}

The field is initially created without a value because it has been bound instead of explicitly defined. The binding does not take effect immediately for performance reasons and typically binds after the tab is rendered, which explains why rendering the tab works for you.

As a result, when you check the validity of Tab 3, it fails because the values have not yet been bound. This becomes clearer if you modify the log statement on line 24 as follows:

console.log(form.owner.title, form.getValues(), form.owner.rendered, isValid)

With this adjustment, upon first rendering the tab panel, you will observe the following output (excluding comments):

afterrender // triggers the view model to notify.
activate
checking
tab1 Object {value: "blah"} true true  // Value bound because it was rendered.
tab2 Object {value: ""} false true
tab3 Object {value2: ""} false false // Value not bound because it is not rendered
checking
tab4 Object {} false true // No properties yet...

If you omit this.getViewModel().notify(), the output changes to:

afterrender
activate
checking
tab2 Object {} false true
tab3 Object {} false true
tab4 Object {} false true
tab1 Object {value: "blah"} true true

Note the difference in order.

Essentially, individual forms on the tabs remain dataless until their field values are bound. Without fields, they are deemed valid. Calling isValid prompts the fields to be defined but still not bound. Consequently, tab3 is considered invalid (lacking data binding), leading to tab 4 being disabled.

If you forego using viewModel.notify(), during the initial checkValidity() call, tab1 lacks data binding. Consequently, it is deemed invalid (having fields but no values), impacting tab2, and so forth.

The validation ultimately resolves itself, but checks only occur when transitioning from true to false, not vice versa, influencing the observed behavior.

To rectify this situation, there are likely multiple approaches available. One effective method involves extracting values from the viewModel during panel initComponent and explicitly assigning them to the fields during creation. This ensures they start with the correct state, enabling them to pass the validity assessment immediately.

Wizard for the advanced tab panel

Answer №1

Similar questions

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

What is the best way to divide an array into pairs and store them in separate arrays?

An AJAX function nested within another AJAX function

The invocation of $.ajax does not work as a function

What is the best way to trigger a controller action when the datepicker's value changes?

Animate sliding bar to move from the left using jQuery

switchMap: Triggering multiple requests simultaneously (2)

The battle between dynamic PDF and HTML to PDF formats has been a hot

Filter the specific output in a generator function

Can you explain the process of a put request in Angular, Express, and Mongoose?

The Express server powered by Node.js is failing to send responses back to HTTP requests initiated from a JavaScript file, despite successfully receiving and processing the requests

Using jQuery, set a restriction on the total number of options in three dropdown menus to

Incorporating a hyperlink into an Iframe triggered by Fancybox2-AJAX, specific to the Iframe's unique identifier

Steps for invoking the next() function within the beforeRouterEnter guard

Performing ajax requests with nested ajax calls within a loop

How to Utilize findIndex to Validate the Presence of Elements in an Array of Objects using TypeScript

What is the process for importing specific modules from jQuery?

Encountering invalid parameters while attempting to utilize the track.scrobble service from the Last.Fm API in a Node.js application

Issue - The 'defaultValue' is failing to load the state value, and the 'value' is not being updated when changed

What is the best way to generate the message dynamically?