PDA

View Full Version : Again: what is wrong with floating?



DaveC426913
26 Nov 2010, 9:07 AM
This snippet of code does not work. No combination of CSS styling or otherise gets 'inner' to show up if floating is set. Comment out floating and at least 'inner' shows up.


Ext.setup({
onReady: function() {
var foo = new Ext.Panel({
fullscreen: true,
style: 'border:1px solid red;',
items:[{
html:'under'
},{
xtype: 'panel',
style: 'border:1px solid blue;',
floating: true,
x:0,
y:0,
html: 'over'
}]
});

},
});

This does work:


Ext.setup({
onReady: function() {
var foo = new Ext.Panel({
fullscreen: true,
style: 'border:1px solid red;',
items:[{
html:'under'
},{
xtype: 'panel',
style: 'border:1px solid blue;position:absolute;top:0;left:0',
html: 'over'
}]
});

},
});

evant
27 Nov 2010, 6:15 PM
As discussed in the previous thread, there's no point to putting a floating item as a child item in a container. They float above all other things.

DaveC426913
29 Nov 2010, 6:58 AM
As discussed in the previous thread, there's no point to putting a floating item as a child item in a container. They float above all other things.
OK, so why isn't it floating above all my other things then?

Besides, it has to be in a container somewhere, even if it's main.

evant
29 Nov 2010, 2:08 PM
No it doesn't. It's meant to float on TOP of everything, so it shouldn't be contained by anything.

DaveC426913
29 Nov 2010, 2:16 PM
No it doesn't. It's meant to float on TOP of everything, so it shouldn't be contained by anything.

You're talking about display; I'm talking about coding.

Display-wise, it will float, yes. But to code it, it will have to exist somewhere.

What you want me to do? This?



onReady: function() {
new Ext.Panel({
id: 'myEntireApp',
});
new Ext.Panel({
id: 'myFloater',
floating:true,
})
});



Look, here's one right here from the sample kitchensink, where it's nested within a panel:



demos.Overlay = new Ext.Panel({
layout: {
type: 'vbox',
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Launch Overlay',
handler: function() {
if (!this.popup) {
this.popup = new Ext.Panel({
floating: true,

evant
29 Nov 2010, 2:23 PM
What you want me to do? This?

Yes.



Look, here's one right here from the sample kitchensink, where it's nested within a panel:

It's not nested in a panel, it's just inside a closure, that's 2 totally different things. It's basically the same as:



function someFn(){
new Ext.Panel();
}
new Ext.Panel();
someFn();

DaveC426913
29 Nov 2010, 2:28 PM
Yes.That code does not work.


I give up. I conclude from what you're telling me that, whatever floating is meant to do, it is not designed to float a popup over top of a panel. I will use straight CSS.

hendricd
29 Nov 2010, 2:56 PM
@DaveC--

I believe what you want is the Ext.Sheet class. It's already configured for float behavior.

DaveC426913
29 Nov 2010, 3:11 PM
@DaveC--

I believe what you want is the Ext.Sheet class. It's already configured for float behavior.

Sure, I'll scrap it and start again.
<rant>I just don't know what to do anymore. Perhaps it's that Sencha is just too new for me. A developer with stronger chops in this kind of thing might be able to infer how to do some of this stuff without documentation. I'm spending days implementing what should be basic features, asking stupid questions, wasting the time of busy Ext developers, then tearing it apart when I can't get it to work.

Our project is going to go bankrupt at this rate. My superiors may pull the plug on Sencha and go with tried, proven, plain ol' JavaScript.</rant>

jeffremer
29 Nov 2010, 3:49 PM
No need to use an Ext.Sheet.

The OP is confusing closures and DOM structure. Floating panels should not be children of other panels. Here's a very basic example. Note that the floating panel is not set as one of the viewport's items.



Ext.setup({
onReady: function() {
var viewport = new Ext.Panel({
fullscreen: true,
html: 'This is a full screen panel'
});

var floatingPanel = new Ext.Panel({
floating:true,
width: 300,
height: 200,
centered: true,
html: 'This is a floating panel'
})

floatingPanel.show();
}
});