Hiding Components

[ashintre]

I am trying to show/hide combo boxes on a panel based upon a radio group selection. However, the show, hide, setVisible methods do not seem to be working. I am using v 4.0.1

Following is the code -

Ext.define('Porto.view.report.Form', {
	extend 	: 'Ext.form.Panel',
	alias 	: 'widget.reportform',
	width	: 600,
	autoHeight : true,
	borders : false,

	items : [ {
		xtype 	: 'datefield',
		fieldLabel 	: 'From',
		name 	: 'fromDate',
		format	: 'Y-m-d',
		allowBlank 	: false,
		value 	: new Date()
	}, {
		xtype 	: 'datefield',
		fieldLabel 	: 'To',
		name 	: 'toDate',
		format	: 'Y-m-d',
		allowBlank 	: false,
		value 	: new Date()
	}, {
		xtype 	: 'radiogroup',
		fieldLabel 	: 'Records',
		columns	: 1,
		vertical	: true,
		id		: 'dailyRecords',
		items 	: [
		      		   { boxLabel 	: 'Test Records', 
		      			 name 	: 'recordType', 
		      			 inputValue : 'testRecords', 
                                         checked    : true
		      		   }, { 
		      			 boxLabel 	: 'Other Records', 
		      			 name 	: 'recordType', 
		      			 inputValue : 'otherRecords',
		      		   }
		      		  ],
		listeners : {
			  change : function(radioGroup, radio) {
				  		var checkedItem = radioGroup.getValue();
				  		var checkedItemValue = checkedItem['recordType'];
				  		if( checkedItemValue == "testRecords" ) {
							  Ext.getCmp('testTypeCombo').setVisible(true);
							  console.log("testRecords");
				  		}
				  		else if ( checkedItemValue == "otherRecords" ){
							  Ext.getCmp('testTypeCombo').setVisible(false);
							  console.log("otherRecords");
				  		}
				  }
			  }
	}, {
	xtype 	: 'combo',
        id 		: 'testTypeCombo',
        name 	: 'testTypeCombo',
        fieldLabel	: 'Test',
        emptyText	: 'All',
        store		: 'TestTypes',
        displayField : 'name',
        editable	: false
    } ]

});

Can someone please point out the mistake?

Thanks!

[ashintre]

anyone?

[stevil]

does the behavior change if you set editable: true on the combo? I know that's not what you want, but am interested to know if it changes the behavior.

at first glance, it doesn't look like you've done anything wrong. i assume that you're seeing the console.log messages, so you know you've at least tried to hide the combo...

stevil

[ashintre]

unfortunately no change in the behavior after setting editable to true.

and yes, I can see the log messages!

[stevil]

Unfortunately (depending on your point of view), I think the best way to get to the bottom of this is to breakpoint the setVisible(false) call, using ext-all-debug, and step into the framework.

My guess is that at some point, it's trying to find an element to hide and is failing because of 1) a config issue, or 2) a bug. You won't know until you get deeper into it.

stevil