1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    Alexdinu is on a distinguished road

      0  

    Default Changing options "messes" up the form

    Changing options "messes" up the form


    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');
    },
    ...

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    Alexdinu is on a distinguished road

      0  

    Default More info

    More info


    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: [
    ...
    ]
    },

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    Alexdinu is on a distinguished road

      0  

    Default more info #2

    more info #2


    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....