PDA

View Full Version : Window constrained to 'center' region of Layout



RollingFred
13 Sep 2010, 4:22 AM
All,

I'm slowly updating the appearance of one app here (want to use a Viewport, removing slowly the references to jQuery, ...)
I have a Viewport with a Border Layout.

When I open an Ext.Window, this window is constrained to the 'center' region. The DIVs for the Window and portion of the Viewport are defined in the same file.

Is there a way to have an Ext window floating freely over the Viewport?

Thanks in advance!



var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
height: 95,
maxSize: 95,
contentEl: 'Header',
split: true
},{
region: 'center',
title: 'Index',
split: true,
width: 225,
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit',
contentEl: 'MainViewPage',
autoScroll: true
}, {
region: 'west',
id: 'west-panel',
title: 'Menu',
split: true,
width: 270,
maxSize: 270,
collapsible: true,
margins: '0 0 0 5',
contentEl: 'SideMenu',
autoScroll: true
}]
});

var linkIconHelp = Ext.get('linkIconHelp');
linkIconHelp.on('click', function(){
showHelp();
});

var help_page = 'Index';

function showHelp()
{
var htmlt = jQuery.ajax({
type: "GET",
dataType: "text",
url: "http://localhost/somewhere",
data: { view_name: help_page, action: 'CallHelp' },
async: false
}).responseText;
jQuery("#helpPopup").html(htmlt);

if(!winHelp){
winHelp = new Ext.Window({
applyTo:'helpPopup-win',
renderTo: document.body,
layout:'fit',
closeAction:'hide',
draggable:true,
plain: false,
resizable:true,
width: 500,
height:400,
x: 200,
y: 100
});
}
winHelp.show();
};

jay@moduscreate.com
13 Sep 2010, 4:46 AM
applyTo:'helpPopup-win',
renderTo: document.body, contend with each other.


According to Component.js, applyTo wins!

http://tdg-i.com/img/screencasts/2010-09-13_0842.png

The docs have it too:

http://tdg-i.com/img/screencasts/2010-09-13_0843.png

jay@moduscreate.com
13 Sep 2010, 4:46 AM
is the markup a child of the center region?

Animal
13 Sep 2010, 4:50 AM
Bleaugh! rip out that jQuery weirdness.



Ext.Ajax.request({
url: 'where to get the help from',
success: function(xhr) {
new Ext.Window({
height: blah, width: blah, title: blah,
html: xhr.responseText
}).show();
}
});

RollingFred
13 Sep 2010, 8:09 AM
@Animal: Nothing better than asking on this forum. Your solution fixed the problem, removed the useless needs of a div for the window, etc...
Getting rid of jQuery is one of the goal, Re-doing all the forms with ExtDesigner another.
Thanks again