1. #1
    Sencha User
    Join Date
    Jul 2008
    Posts
    15
    Vote Rating
    0
    hallow is on a distinguished road

      0  

    Question bringing window to the top

    bringing window to the top


    We have a modal window, that's defined as part of a FormPanel, that we want bound to the form, but to display at the page level (the window is bigger than the constraints of the panel, and should prevent any other actions on the page until it is closed).

    In extjs2, we solved this by creating a class that extends Ext.Window, and creates a new div at the top of the page, and sets the applyTo to that Element.

    However, in extjs3 (3.2.2 to be exact), it appears to only half listen to the applyTo directive. The window is drawn not at the page level, but still bound to the panel. But if modal:true, the modal mask is drawn at the top level, and the entire page becomes unusable.

    I'm including code below that demonstrates the problem:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>TopWindow Test</title>
    		
    		<link rel="stylesheet" type="text/css" href="/extjs/ext-3.2.2/resources/css/ext-all.css" />
    		<link rel="stylesheet" type="text/css" href="/ext.seguetech3/resources/css/blue.css" />
    
    		<script type="text/javascript" src="/extjs/ext-3.2.2/adapter/ext/ext-base-debug.js"></script>
    		<script type="text/javascript" src="/extjs/ext-3.2.2/ext-all-debug.js"></script>
    
    		<!-- set the blank url --> 
    		<script type="text/javascript">
    			Ext.BLANK_IMAGE_URL = '/extjs/ext-3.2.2./resources/images/default/s.gif';
    
    			Ext.namespace('Ext.ux');
    
    			Ext.ux.TopWindow = function(config) {
    				Ext.apply(this,config);
    				// create a new div for this window instance to apply to.
    				this.element = Ext.DomHelper.insertFirst(Ext.DomQuery.select("BODY")[0],[{tag: "div"}],true);
    				this.applyTo = this.element;
    	
    				Ext.ux.TopWindow.superclass.constructor.call(this);
    			};
    
    			Ext.extend(Ext.ux.TopWindow, Ext.Window, {}); 
    
    
    			Ext.onReady(function(){
    				window['myform1'] = new Ext.form.FormPanel({
    					title:'TopWindow Test',
    					renderTo:'form1',
    					height:320,
    					tbar: [
    						{text: 'TopWindow',handler: function() {Ext.getCmp('form1Window').show();}},
    						{text: 'Modal TopWindow',handler: function() {Ext.getCmp('form1ModalWindow').show();}}
    					],
    					items:[
    						new Ext.ux.TopWindow({
    							title:'TopWindow',
    							html:'This window should appear at the top level, not bound to the FormPanel.',
    							id:'form1Window',
    							modal:false,
    							shadow:true,
    							border:true,
    							frame:true,
    							height:300
    						}),
    						new Ext.ux.TopWindow({
    							title:'Modal TopWindow',
    							html:'Although this window should appear at the top level, it does not.<br>But the modal mask does, preventing any further page interaction.',
    							id:'form1ModalWindow',
    							modal:true,
    							shadow:true,
    							border:true,
    							frame:true,
    							height:300
    						})
    
    					]
    				});
    			});
    		</script>
    	</head>
    <body style="align:center;">
    	<div id="form1" style="width:320px; margin-left:20px;margin-top:20px;"></div>
    </body>
    </html>

  2. #2
    Sencha User
    Join Date
    Jul 2008
    Posts
    15
    Vote Rating
    0
    hallow is on a distinguished road

      0  

    Default


    Oh, another thing to note. The modal bit blocks movement and access to the entire window with IE8. IE7 and Firefox still allow the modal window to be accessed/moved around, but only within the formpanel.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You cannot use a Window as a child item.

  4. #4
    Sencha User
    Join Date
    Jul 2008
    Posts
    15
    Vote Rating
    0
    hallow is on a distinguished road

      0  

    Default


    I hate to argue the point, but.... I will. Although it doesn't do what I want in extjs3, and it did in extjs2, it is clearly possible to use a Window as a child item (the demo code is example enough that it is possible to do so).

    There is no such prohibition in the API docs.

    Window's inheritance path looks like this:
    Observable>Component>BoxComponent>Container>Panel>Window

    According to the definition of Ext.form.FormPanel:items -
    Each item may be:
    - any type of object based on Ext.Component

    Ext.Window extends down the line from Ext.Component, and so is a candidate for being a child item. In fact, Ext.form.FormPanel's items is extended from Ext.Container, so just about any type of Container can have a Window in it.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,499
    Vote Rating
    46
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You can't.

    Render the Window to whatever element should house it.

  6. #6
    Sencha User
    Join Date
    Jul 2008
    Posts
    15
    Vote Rating
    0
    hallow is on a distinguished road

      0  

    Default


    I can. But it no longer works the way I want. It worked in 2, it doesn't in 3. Guess I was taking advantage of a bug.

    It's not like I'm dealing with a new app here, and can just change a few lines of code. This is a very large existing application. We have fixed many smaller compatibility issues with 3 already. This particular problem hits the core of our application though and will block us from being able to upgrade to extjs3, or cause us to have to expend significant resources to rework it, if we can't find a fix/workaround.

Similar Threads

  1. DateField - any thoughts on bringing it to sencha touch?
    By jay@moduscreate.com in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 28 Jul 2010, 9:24 AM
  2. Spotlight a Window on top of a Window
    By ndadosky in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 29 Jun 2010, 1:11 AM
  3. Window in Desktop Example always on top ...
    By keckeroo in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 23 Oct 2008, 10:13 PM
  4. PopupMenu on top of a window
    By slupix in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 30 Jul 2008, 2:45 AM
  5. NPE caused when bringing up a context menu in a TreeTable.
    By rszeto in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 5 May 2008, 9:07 AM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi