4 Oct 2012 11:38 AM #1
Unanswered: How To Render a Ext.FormPanel inside a Ext.Window when All belongs to Ext.ViewPort
How To Render a Ext.FormPanel inside a Ext.Window when All belongs to Ext.ViewPortHi 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.
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.
10 Oct 2012 9:21 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
The panel you can make floating and modalMitchell Simoens @SenchaMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services firstname.lastname@example.org
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
10 Oct 2012 9:50 AM #3
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?)
10 Oct 2012 10:06 AM #4
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.
Hope you could help with this issue and thanks for the fast reply.
10 Oct 2012 10:28 AM #5
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?
10 Oct 2012 4:52 PM #6
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