如何在ExtJS中通过reference或itemId动态隐藏RadioField

Let's walk through the issues in your code and fix them step by step—no more relying on Ext.getCmp()!

First, Fix the Critical Mistakes in Your Current Code #

1. Typos in Configuration: You wrote itemid: 'radio3Id' but ExtJS uses camelCase for configs—this should be itemId: 'radio3Id'. The lowercase d means ExtJS won't recognize your itemId at all.
2. Early return Statement: In your if block, return; runs before your hide logic, so that code never executes. Remove that line.
3. Incorrect Method for Hiding: hidden(true) isn't a valid ExtJS method. Use setHidden(true) (or hide()) to hide components, and setHidden(false) (or show()) to reveal them.
4. ComponentQuery Selector Mismatch: You used #rad3 and #radio3Id—make sure your selector matches the actual itemId or reference you set. Also, Ext.ComponentQuery.query() returns an array, so you need to grab the first element with [0].

Solution 1: Using itemId #

First, correct your RadioField config:

boxLabel: 'XL', 
name: 'size', 
inputValue: 'xl', 
// id: 'radio3', // Remove this—no more id dependencies!
itemId: 'radio3Id' // CamelCase is mandatory here

Then update your logic to properly fetch and manipulate the component:

// Fetch the radio components using their itemIds
const radio3 = Ext.ComponentQuery.query('#radio3Id')[0];
const radio2 = Ext.ComponentQuery.query('#radio2Id')[0]; // Match radio2's itemId
const radio1 = Ext.ComponentQuery.query('#radio1Id')[0]; // Match radio1's itemId

if (radio3.getValue()) {
    radio2.setValue(true);
    radio3.setHidden(true); // Properly hide the XL radio
} else {
    radio1.setValue(true);
    radio3.setHidden(false); // Show it again
}

For better performance (instead of global ComponentQuery), fetch from a parent container (like your form panel):

// Get the parent form first
const myForm = Ext.ComponentQuery.query('#mySizeForm')[0];
// Then use down() to find the radio inside the form
const radio3 = myForm.down('#radio3Id');

Solution 2: Using reference (Recommended for MVVM/MVC) #

References are cleaner for structured apps—they're scoped to their parent container, avoiding global lookup issues.

First, add a reference to your RadioField:

boxLabel: 'XL', 
name: 'size', 
inputValue: 'xl', 
reference: 'sizeRadioXL' // Unique reference name

Then, fetch the component using lookupReference():

• In a Controller:

  // Inside your controller method
  adjustSizeRadios: function() {
      const radio3 = this.lookupReference('sizeRadioXL');
      const radio2 = this.lookupReference('sizeRadioL'); // Match radio2's reference
      const radio1 = this.lookupReference('sizeRadioS'); // Match radio1's reference
  
      if (radio3.getValue()) {
          radio2.setValue(true);
          radio3.setHidden(true);
      } else {
          radio1.setValue(true);
          radio3.setHidden(false);
      }
  }
  

• In a View's Handler:

  // Example: Button click handler inside your view
  items: [{
      xtype: 'button',
      text: 'Adjust Size Options',
      handler: function(btn) {
          // Get the parent view (e.g., form panel)
          const parentView = btn.up('form');
          // Look up the reference scoped to this view
          const radio3 = parentView.lookupReference('sizeRadioXL');
          // Rest of your logic here...
      }
  }]
  

Key Takeaways #

• Always use camelCase for ExtJS configs (e.g., itemId, not itemid).
• Avoid return; statements before code you need to execute.
• Use setHidden()/hide()/show() instead of invalid method calls.
• reference is preferred over itemId for maintainable apps—it aligns with ExtJS's MVVM architecture.

内容的提问来源于stack exchange，提问作者Jb45