PDA

View Full Version : [CLOSED]panels disappear when fullscreen:false



ultrasaurus
18 Jul 2010, 6:40 PM
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
18 Jul 2010, 7:03 PM
Fullscreen components automatically show themselves, you need to either:

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

If they aren't.

ultrasaurus
18 Jul 2010, 7:09 PM
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
18 Jul 2010, 7:11 PM
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
18 Jul 2010, 7:26 PM
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
18 Jul 2010, 7:38 PM
Render expects an element as the first parameter, however it's more common to use:



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

ultrasaurus
18 Jul 2010, 8:00 PM
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
18 Jul 2010, 8:08 PM
Either

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