How To Render a Ext.FormPanel inside a Ext.Window when All belongs to Ext.ViewPort
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.
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.
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?
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:
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.
Perhaps you are looking for something like the spotlight feature?
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!
It is available for 3.4:
I gave you the wrong link.
Tags for this Thread