Changing options "messes" up the form

[Alexdinu]

I have a form with a couple of radio options. Clicking them hides or displays a couple of items. When I default the option to display the items and then click the one to hide, the form works fine. But if I default the one to hide the items, when I show the items, the bottom of the form does not show as if the form height is set and and the bottom controls do not show.
I tried different methods to hide and show the controls, but they all have the same effect. Here is the view and the controller code:

Ext.define('iConnect.view.knowledge.Feedback', {
extend: 'Ext.container.Container',
alias: 'widget.knowledgefeedbackpage',


initComponent: function () {
var me = this;


Ext.apply(me, {
title: 'Feedback',
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'container',
cls: 'grayBodySection',
html: 'Feedback Type'
},
{
id: 'feedbacktypeid',
xtype: 'radiogroup',
margin: '10 10 10 10',
columns: 1,
vertical: true,
items: [
{ boxLabel: 'For this knowledge article', name: 'type', inputValue: '1', checked: true },
{ boxLabel: 'New knowledge request/suggestion', name: 'type', inputValue: '2' },
]
},
{
xtype: 'container',
id: 'articledetailid',
hidden: false,
items: [
{
xtype: 'container',
cls: 'grayBodySection',
html: 'Article Detail'
},
{
id: 'articleid',
xtype: 'textfield',
fieldLabel: 'Article Id',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Article Title',
width: 900,
hidden: true
}
]
},
{
xtype: 'container',
cls: 'grayBodySection',
html: 'Additional Details'
},
{
id: 'caseIdid',
xtype: 'textfield',
fieldLabel: 'Is there a case number that may provide additional information',
labelWidth: 300
},
{
id: 'additionalInformationid',
xtype: 'textarea',
fieldLabel: 'Please provide any information that will help improve our knowledge resources',
labelWidth: 300,
overflowY: 'scroll',
allowBlank: false,
height: 200,
width: 900
},
{
xtype: 'container',
cls: 'grayBodySection',
html: 'Attachments',
hidden: true
},
{
xtype: 'container',
hidden: true,
layout: {
type: 'hbox'
},
items:[
{
xtype: 'form',
fileCount: 1,
id: 'attachmentFormid',
api: {
submit: iConnect.Attachments.upload
},
border: false,
items: [
{
xtype: 'filefield',
emptyText: 'Select a file',
buttonText: 'add',
width: 300,
id: 'fileid1'
}
]
}
]
},
{
xtype: 'container',
cls: 'grayBodySection',
html: 'Complete Submission'
},
{
xtype: 'button',
text: 'Submit Feedback',
action: 'saveFeedback'
}


]
});


me.callParent(arguments);
}
});

...
toggleViewableSections: function () {
var articleInfo = Ext.getCmp('articledetailid');
var checkedValue = Ext.getCmp('feedbacktypeid').getValue()['type']; //get the value of the currently checked item

if (checkedValue == "2")// New.
articleInfo.getEl().setStyle('display', 'none');
else// Update.
articleInfo.getEl().setStyle('display', 'block');
},
...

[Alexdinu]

So I tried the following in the controller:

//articleInfo.getEl().hide();
//articleInfo.getEl().setStyle('display', 'none'); - with different options.
articleInfo.getEl().setVisible(false);

I also added the hideMode to the container, but it didn't do anything....
{
xtype: 'container',
id: 'articledetailid',
hidden: true,
hideMode: 'offsets',
items: [
...
]
},

[Alexdinu]

I resolved the issue with the following workaround:

onLaunch: function () {
// For some reason, when we execute toggleViewableSections, the page is cut off when displaying articledetailid.
// This line was added so that it would render properly.
var articleInfo = Ext.getCmp('articledetailid');
articleInfo.getEl().hide();
},

But I don't believe that this is needed. I must be missing something....