Hide a text input on a dialog box of CKEditor

Question

I'm working on a plugin in CKEditor which have as a goal to hide or show element depending on which of my check box is checked. I have those element defined :

contents :
            [
                {
                    id : 'tab1',
                    label : 'Configuration Basique',
                    elements :
                    [
                        {
                            type : 'checkbox',
                            id : 'check',
                            label : 'Vers une page web',
                            'default' : 'unchecked',
                            onClick : function(){

                            }
                        },
                        {
                            type : 'text',
                            id : 'title',
                            label : 'Explanation',
                        }    
                    ]
                },
                {
                    id : 'tab2',
                    label : 'Advanced Settings',
                    elements :
                    [
                        {
                            type : 'text',
                            id : 'id',
                            label : 'Id'
                        }
                    ]
                }
            ],

so now what i would like to do is to hide no disable the text input with the label and print it only when the box is checked. So i've seen that i should use something like that :

onLoad : function(){
                this.getContentElement('tab1','title').disable();
        },

but the thing is i don't want to disable it i want to hide and then print it if the user check the box (which is why i put a onClick function in my checkbox). i've tryed to use the hide() function but it doesn't work and also the setAttribute('style','display : none;') Tia :)

Answer 1

If you actually want to hide (and not disable) the element you can do this using

this.getContentElement('tab1','title').getElement().hide();

The extra getElement() call returns the litteral DOM object for your contentElement object, so you can call hide()/show() at will on it.

Answer 2

The onClick properties is available and does work on uiElement although it is not documented. The biggest problem is the definition of "this" is not the same inside the event than other place in the config. You first have to get the dialog to get other fields:

{
    type: 'checkbox',
    id: 'check',
    label: 'check',
    onClick: function() {
        var dialog = this.getDialog()
        if(this.getValue()){
            dialog.getContentElement('tab1','title' ).disable();
        } else {
            dialog.getContentElement('tab1','title' ).enable()
        }
    }
}