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

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

JS Issue with Generating Content

Choosing between exclusive choices across multiple selection elements in Vue 3

How to set up 'ng serve' command in Angular to automatically open a private browsing window?

ReactJS bug: Array rendering problem affected by recent changes

The code encountered an error with message TS2345 stating that the argument type '(a: Test, b: Test) => boolean | 1' cannot be assigned to a parameter type of '(a: Test, b: Test) => number'

Cannot find JS variable after loop has completed

Guide on transferring JSON information from a client to a node.js server

Angular and Express: Automatically redirecting to the previous page after user login

Using SVG Inline Style Conditionals in ReactJS

Checking the validity of a JSON file extension using regular expressions

"Silent Passageway: Connecting Node JS to ASW RDS MySQL Through a Secret

What are the steps to address the Invalid Hook Call issue while working with Material UI?

The values entered in the React form inputs are not displaying accurately

Tips for refreshing the tawk.to widget when the language changes with the help of i18next

I used npm to install AngularJS and then included AngularJS in my application

Creating a Rails application that dynamically fills a table with data from a

When attempting to send data from Ajax to PHP as JSON, an error occurs and the data transmission fails

Assign value to twig variable using JavaScript in Symfony version 3.4

The behavior of having two submit buttons within the $document.ready(function) in Jquery