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).
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.