hiding htmleditor?

[urban10]

I am trying to work out a method for swapping the contents of a Panel element, which contains another Panel element and HtmlEditor component. However, I only want one of the internal elements to display at once (start with Panel showing content, user clicks on button to switch to HtmlEditor so user can edit the content and Panel is then hidden).

However, it doesn't appear that there is a way to hide the HtmlEditor upon initialization so that only its corresponding Panel element appears. I've tried using the event methods to no avail. Should I create both elements at initialization and hide one of them, or is there a better method I'm overlooking...such as just creating the HtmlEditor at runtime as needed and hide the Panel?

[para]

I would use a Panel with a Card layout. One card would be the content, the other card can be the html editor.
Your button could 'sync' contents back and forth, and simply change cards.

If you're not familiar with Card layout, think TabPanel without the tabs.

[urban10]

Thanks para... I tried using a card layout but the html editor still appears. When I use regular text for each of the card layout's panels it works as expected, but not when switching back to the html editor.

Here's what I'm doing for testing purposes:

Ext.onReady(function(){
        var p = new Ext.Panel({
            title: 'Editor',
            collapsible: false,
            layout: 'card',
            activeItem: 0,
            width: 800,
            renderTo: 'container',
            items: [{
                id: 'card-0',
                html: 'asdasdfasf'
            },{
                id: 'card-1',
                xtype: 'htmleditor',
                width: 'auto',
            }]
        }); 
    });

[para]

Ah.
What follows may not be exactly correct, but its the best i can do from memory... (too lazy to look things up right now)

HtmlEditor extends ?Editor?.
What I'd do is add an extra Panel in there to see if that works.

Let me know.

Ext.onReady(function(){
        var p = new Ext.Panel({
            title: 'Editor',
            collapsible: false,
            layout: 'card',
            activeItem: 0,
            width: 800,
            renderTo: 'container',
            items: [{
                id: 'card-0',
                html: 'asdasdfasf'
            },{
                
                id: 'card-1',
                layout: 'fit',
                items: [{
                    xtype: 'htmleditor',
                    width: 'auto'
                }]
            }]
        }); 
    });

[urban10]

Yeah I even tried that, which prevented the html editor from displaying altogether. When referring back to the API docs for HtmlEditor, which extends Field, I noticed this statement which may be the root of my issues:

"An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within any element that has display set to 'none' can cause problems in Safari and Firefox due to their default iframe reloading bugs."

I will try another approach which will hopefully work out.