How To Render a Ext.FormPanel inside a Ext.Window when All belongs to Ext.ViewPort

[santosr666]

How To Render a Ext.FormPanel inside a Ext.Window when All belongs to Ext.ViewPort

Hi Everyone,

I have a extended Ext.Panel, with layout='card'. Inside this panel I have two inner Ext.FormPanels: one to diplay data (vPanel) and one for edit data (ePanel). It works just fine, vPanel has a "Edit" button which shows ePanel when clicked and hide vPanel. Everything is inside a Ext.ViewPort element and works.

My question is: I would like to disable the whole background when ePanel is active, so pretty much a popup window with a dimmed background, but I don't want window's elements on it, like close button, floating/movable whatever ... just a panel with dimmed/disable background.

Once I'm quite new to javascript and ExtJS I need advice here.

I have already seen that a window with modal=true might work. But will it accomplish all my requirements? when adding it as an item inside the Ext.ViewPort how should I trigger the show method? (some code sketch might be helpfull as well).

Thanks in advance and kind regards.

Reginaldo.

[mitchellsimoens]

The panel you can make floating and modal

[santosr666]

Well ... not too sure if that will help.

Look, I have a lot of elements in the page and I don't want to move my panel from position, but just want to disable/mask all other components when and only when ePanel is active.

If floating with modal works I still need to get the original position to make the panel looks like absolute, right?

Moreover, is it possible to set floating and modal at runtime inside a button handler? (How?)

[santosr666]

One more details.

I've just done a test with floating and modal. Still don't know how to get the original position of my Panel (the position it should have if it was not floating), but it does not work.

Panel is floating but all elements behing are avaible (modal is not working). Moreover, the bottom of my panel is somehow hidden and I can't see buttons from bottom toolbar, but when I "tab" to reach them the panel is fully repainted.

Very strange.

Hope you could help with this issue and thanks for the fast reply.

Cheers,

[santosr666]

Sorry ... but I thought you were replying my other issue.
Actually it is the same issue, but now I know a little bit more about ExtJs.

Can you please take a look in this one? Should I close the current one?

http://www.sencha.com/forum/showthread.php?245548

[santosr666]

Guess I know why now ...

Once Spotlight does use windows dimensions to draw the bounds:

==============================
Spotlight.js > applyBounds method:

var dw = Ext.lib.Dom.getViewWidth(true);
var dh = Ext.lib.Dom.getViewHeight(true);
==============================

And at the moment I'm calling Spotlight.show() in my parentPanel my window is still not resized with new ePanel I'm getting this error (I guess).

Any hints of how to proceed to get the new size of the window before drawing the spot will be very welcome! :-D

Cheers,