Extjs4 fieldset.show() and fieldset.hide() is not a function issue

Question

I have a problem with fieldsets show and hide functions. In my app at the left side I have a combobox with change listener. At the right side I have several different textfields which are showing and hiding according as chosen value in combobox. Every hide and show functions are working with fieldsets, but if I can't to show/hide fieldset. Fieldset reference is visible, I can list this component with console.log() function.

Here's a piece of my code:

var rigthPanelLeftContainer = {
        flex: 1,
        minWidth: 200,
        defaults: {
            xtype: 'textfield',
            minWidth: 180,
            anchor: '100%'
        },
        items: [
//some working textfields here 
{

      xtype: 'fieldset',
      labelWidth: 160,
      anchor: '100%',
      height: 40,
      itemId: 'remarkId',
      title: 'title'],
      hidden : !ifHideIt, //boolean
                    items: [{
           xtype: 'text',
           height: 25,
           text: 'sometext']
        }]
 }
]};

 var comboBoxConnectors = {
        xtype: 'combobox',
        fieldLabel: Ext.translations.map['field.label.common'],
        store: Ext.state.Manager.get('conTypes'),
        editable: false,
        queryMode: 'local',
        name: 'conType',
        itemId: 'conTypeField',
        value: connObj === null ? conTypes[0] : connObj.type,
        labelWidth: 160,
        anchor: '100%',
        listeners: {
            change: function(obj, newValue, oldValue) {

             //many hide/show working on textfield functions

             var remarkId = me.query('#remarkId');
             console.log(remarkId); //returns my fieldset element
             remarkId.hide(); //returns remarkId.hide is not a function
        }
 }
 }

I really need your help guys, whats wrong with this?

Answer 1

In your code, you have a comment that says that me.query( '#remarkId' ) returns your fieldset element. This is not technically correct. Assuming that me.query() is a component query, what you are actually getting in return is an array of matched components. So then, you're getting the undefined function error because, most definitely, an array does not have a hide() method. If you access the first element in the array and then call the hide() method, it should work.

However, you should probably also consider going about this a bit differently. Instead of getting an array of elements with query() (which may always be one, but not necessarily...), you could use the built in traversal methods to find the correct component. For example, assuming that the combobox and the fieldset are both children of the same form panel, you could do something like this: mycombobox.up( 'form' ).down( 'fieldset#remarkId' ). This basically instructs the code to traverse up the component hierarchy to the nearest form, then to drill down to the first descendant of the form that is a fieldset with the itemId of "remarkId". This will only ever give you a single component as a result, so you don't have to bother with accessing a component out of an array of components.