How to add Ext.window in side an Ext.panel

[Ankit.Desai]

Hello, I am trying to add Ext.window as a child of an Ext.panel. I tried different way like, in show method of window I passed panel id
}).show('pan1') or get panel component and add window in side it

Ext.getCmp('pan1').on('load',function(){ win1.show('siteSearchOption');
});


none of them worked. My aim is to add window in side a panel as child like we do with other component as xtype:'panel'.

Please find below full code of the page I am working on. This will display both the window and parent panel but window displayed as independent component so, it is rendering anywhere on the page. I want to restrict its movement only in to parent panel.




Ext.onReady(function(){


Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: '100%',
height: 800,
title: 'Site Register',
layout: 'column',
items: [
{
xtype: 'panel',
id:'pan1',
title: 'siteSearchPanel',
height: 700,
width: '55%',
items:[new Ext.window.Window({
title: 'Search Options',
id: 'win',
height: 200,
width: 650,
layout: 'fit',
collapsible: true,

items: [{
xtype: 'panel',
height: 100,
width: 650,
contentEl:'siteSearchOption'
}]
}).show()]
},
{
xtype: 'tabpanel',
title: 'Site Information',
height: 700,
width: '45%',
items:[{
//contentEl:'siteTabContentsDiv',
title:'Site'
},{
title: 'Pressure',
html: 'PRESSURE STUFF GOES HERE'
},{
title: 'Cluster',
html: 'CLUSTER STUFF GOES HERE'
}]
}
]
});
});




Hope to see some reply.

-Ankit

[art.home.ext]

Maybe it can be done but I would not have set a Window as an item of a Panel.

Try this instead :

{
xtype: 'panel',
id:'pan1',
title: 'siteSearchPanel',
height: 700,
width: '55%',
html:'',
listeners:{
afterrender:function(p){
var aBdy = p.el.child(".x-panel-body");
new Ext.window.Window({
title: 'Search Options',
id: 'win',
height: 200,
width: 650,
layout: 'fit',
collapsible: true,
constrainTo:aBdy,
constrain:true,
x:aBdy.getX(),
y:aBdy.getY(),
items: [{
xtype: 'panel',height: 100,width: 650,contentEl:'siteSearchOption'
}]
}).show();
}
},
}

It might be possible to have a floating and draggable Panel as an item instead of a Window too.

[skirtle]

Here's a similar approach:


var panel = new Ext.panel.Panel({
height: 600,
renderTo: Ext.getBody(),
title: 'Title',
width: 600
});

new Ext.window.Window({
constrainHeader: true, // or just constrain: true if you prefer
height: 300,
renderTo: panel.body,
title: 'Window',
width: 300
}).show();

Use renderTo to add the window to a container, then use either constrain or constrainHeader to keep it within the container. This is all documented here:

http://docs.sencha.com/ext-js/4-0/#/api/Ext.window.Window-cfg-constrain

[Ankit.Desai]

Thanks art.home.ext and skirtle for solutions. As, I am more comfortable with panel, I am trying art.home.ext 's second approach to make Panel floating and draggable . :)

Ankit