How to hide and show textfield on checkbox in extjs

Question

I am trying to show and hide the textfield in extjs, I am unable to toggle this Here is my code below.

        xtype : 'checkbox',
        fieldLabel : 'Is WGVPN',
        id : 'isWGVPN-id',
        listeners:
        {
            change: function()
            {
                showGVPNCaseAsPerScenario(Ext.getCmp('isWGVPN-id').getvalue,Ext.getCmp('ethFreeVCGNumber-id'));
                if(Ext.getCmp('isWGVPN-id').getvalue==true)
                {
                    Ext.getCmp('ethFreeVCGNumber-id').disable();
                    Ext.getCmp('ethFreeVCGNumber-id').hide();
                    Ext.getCmp('ethFreeVCGNumber-id').up('.x-form-item').setDisplayed(false);  
                }
                else
                {
                    Ext.getCmp('ethFreeVCGNumber-id').enable();
                    Ext.getCmp('ethFreeVCGNumber-id').show();
                    Ext.getCmp('ethFreeVCGNumber-id').up('.x-form-item').setDisplayed(true);  

                }

            }
        }
    }

Answer 1

xtype      : 'checkbox',   
fieldLabel : 'Is WGVPN',  
id         : 'isWGVPN-id',   
listeners: 
{   
    change: function(newValue,OldValue) {    
        if(newValue== true){      
            Ext.getCmp('ethFreeVCGNumber-id').setVisible(false);   
        } else{   
            Ext.getCmp('ethFreeVCGNumber-id').setVisible(true);   
        }   
    }
}   

Use this code.