[CLOSED]panels disappear when fullscreen:false

[ultrasaurus]

Is it a bug or some strange feature which I don't understand that causes panels to disappear when fullscreen is false.

With this code I see a blank page:

Ext.setup({
        onReady: function() {
            new Ext.Panel({
                id: 'mainscreen',
                html: 'This is some text in a panel. <br /><small>This is smaller text.</small>',
            });
    }
});

With this code I see the text I expect:

Ext.setup({
        onReady: function() {
            new Ext.Panel({
                id: 'mainscreen',
                html: 'This is some text in a panel. <br /><small>This is smaller text.</small>',
                fullscreen:true
            });

           
    }

});


What up?

Thanks,
Sarah

[evant]

Fullscreen components automatically show themselves, you need to either:

a) explicitly call show
b) render it to an element

If they aren't.

[ultrasaurus]

1) If hidden is false by default, why must I call show?
2) what does it mean to "render it to an element" ? Can you specify what the code would look like for that?

Thanks for your quick response,
Sarah

[evant]

fullscreen true automatically renders it to the document body. If not, the component isn't rendered until you call either render, or show.

All components have to be rendered somewhere in the DOM, so you can specify a particular element, or you can just call show(), which will render to the document body if you haven't specified anywhere to render it to.

[ultrasaurus]

Sorry to appear dimwitted, but I'm not getting it. I tried this:

Ext.setup({
        onReady: function() {
            var mypanel = new Ext.Panel({
                id: 'mainscreen',
                html: 'This is some text in a panel. <br /><small>This is smaller text.</small>'
            });
            mypanel.render();

           
    }
});

and got this error:
TypeError: Result of expression 'el' [null] is not an object.

However, this code worked:

Ext.setup({
        onReady: function() {
            var mypanel = new Ext.Panel({
                id: 'mainscreen',
                html: 'This is some text in a panel. <br /><small>This is smaller text.</small>'
            });
            mypanel.show();

           
    }
});

What exactly does render do, when would i use it and how is it used correctly (since the above code is clearly wrong)?

Thanks,
Sarah

[evant]

Render expects an element as the first parameter, however it's more common to use:

new Foo({
    renderTo: 'el'
});

[ultrasaurus]

Render expects an element as the first parameter, however it's more common to use:

new Foo({
    renderTo: 'el'
});

Ok, I like that shortcut.

One more thing... what is 'el' ?

Thanks,
Sarah

[evant]

Either

a) The id of an element
b) A dom element reference
c) An Ext.Element reference