View Full Version : How To Render a Ext.FormPanel inside a Ext.Window when All belongs to Ext.ViewPort

4 Oct 2012, 10:34 AM
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.


4 Oct 2012, 2:40 PM
to make sure I understand your request ... you have a viewport that has an edit button that loads a window that contains a form.. and you want to mask the background behind the window.

Does modal not work as needed?


4 Oct 2012, 3:12 PM
No, this is not the case. I have a framework based on ExtJS which makes the browser looks like a web IDE. So the final user can add and change GUI elements and the result is stored in a xml file. When loading the screen the system builds the html page. So besides some basic html standarts it also includes the JS scripts and so on.

All my GUI elements are some extended ExtJS element and the system builds everything as items inside a:

new Viewport({...}).

So, one of my items inside this main Viewport is an Ext.Extend(Ext.Panel ...). This panel has layout='card', so I can switch between two inner Ext.FormPanels (viewPanel and editPanel). All logic is already working, but I need a kinda of disabled/dimmed background when button edit is hit in the viewPanel (setActiveItem changes from 0 to 1).

In the end, I don't need and don't want any window functionality, but modal's.

Any ideas?

4 Oct 2012, 8:34 PM
Perhaps you are looking for something like the spotlight feature?


5 Oct 2012, 3:41 AM
Great! That is that!

Do you have any hints how could I apply this feature to ExtJS 3.4 implementation?

And thank you for your support! It already helped me a lot!



5 Oct 2012, 4:15 AM
It is available for 3.4:

I gave you the wrong link.


5 Oct 2012, 10:39 AM
Hum ... cool!

It is really a nice feature and it is almost working now :)

I still have problem: when the target panel (spotlight panel) is not fully displayed in the window, the spotlight borders are set with the size of the visible part of the panel. Thus, when rolling down the screen the panel is not fully taken by the spotlight.

Any clue how can I handle this situation?

Thanks again!

5 Oct 2012, 10:43 AM
Can you send a screen?

5 Oct 2012, 10:52 AM
Well ... I just enforce it on the example and it is woking fine.

It might be something wrong in my implementation.


5 Oct 2012, 12:41 PM
I still have no clue what is going wrong.

My basic code is just like the sample:

var spot = new Ext.ux.Spotlight({easing:'easeOut', duration: .3});

var updateSpot = function(id){
if(typeof id == 'string'){
}else if (!id && spot.active){

And inside my Panel, when setting the active item (editor FormPanel) I just directly call the function:


The only thing different is that I'm not using delegation. Could that be the problem?

8 Oct 2012, 9:48 AM
Just to update my quest for the holy spotlight:

I guess I know what is going on: my editorPanel is greater than my viewPanel, but the spotlight is being created with the viewPanel dimensions. It sounds simple, just a matter of creating the editPanel in the right time, but well ... I have tried some options and still don't get it.

Again, my parent Panel is layout: 'card'.

Any clue where should I place/update the spotlight?