Show a Popup Window with a list of values

If a user needs to show a popup window that contains the custom list add the following codes.  Here we use ‘ExtJs’ to show the popup, and this is the one used by NetSuite to display the popup window. So, we can directly utilize this ‘Ext’ library in the scripts.

// Call the function to show the popup window
                showPopupWindow();

// Create a function to show the popup window
function showPopupWindow() {
                  // Create the select field with options
                  let selectField = new Ext.form.ComboBox({
                    fieldLabel: 'Please select a reason from the dropdown',
                    store: changingReasons, 
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'value',
                    forceSelection: true,
                    editable: false
                  });

                  // Create the submit button
                  let submitButton = new Ext.Button({
                    text: 'Submit',
                    handler: function () {
                      // Retrieve the selected value from the select field
                      let selectedValue = selectField.getValue();

                      if (checkForParameter(selectedValue)) {
                        currentRecord.setCurrentSublistText({
                          fieldId: 'custcol_jj_so_price_level_chang_reasn',
                          sublistId: 'item',
                          text: selectedValue
                        })
                      }
                      // Close the popup window
                      popupWindow.close();

                    }
                  });

                  let Cancel = new Ext.Button({
                    text: 'Cancel',
                    handler: function () {
                      currentRecord.setCurrentSublistText({
                        fieldId: 'custcol_jj_so_price_level_chang_reasn',
                        sublistId: 'item',
                        text: checkForParameter(currentChangeReasonValue) ? currentChangeReasonValue : '',
                        // ignoreFieldChange: true,
                      });
                      alert("The price level value has not changed.");
                      // Close the popup window
                      popupWindow.close();
                    }
                  });

                  // Create the popup window
                  let popupWindow = new Ext.Window({
                    title: 'Select a changing Reason',
                    layout: 'form',
                    width: 460,
                    height: 125,
                    items: [selectField],
                    buttons: [submitButton, Cancel],
                    closable: false,
                    scrollable: true,
                    modal: true,
                    centered: true
                  });
                  // Show the popup window
                  popupWindow.show();
                }

• If we need to remove the ‘close’ button present in the popup window, add the ‘closable: false,’ in the ‘new Ext.Window({})‘
• If you want to restrict the interaction with other parts of the UI until the user has responded to the prompt, we can set the ‘modal: true‘. you want to restrict their interaction with other parts of the UI until they have responded to the prompt.
• You can add more buttons in the ‘Button’ field and the action must be pre-defined (like Submit and cancel buttons)