PDA

View Full Version : Insert Window into Viewport TabPanel



nadeemshafi9
6 Mar 2009, 2:36 AM
Hello Guys

I am very new to ExtJS, i have a demo viewport setup and i have 2 windows inserted into the region: 'center' using renderTo: 'vpCenter', now i dont whant them there i would like them to appear in one of the two panels i have defined when instantiating the Viewport in its items array, take a look at my viewport:



function createViewPort(){
vp = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Menu Option 1',
leaf: true
}, {
text: 'Menu Option 2',
leaf: true
}, {
text: 'Menu Option 3',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
}, {
region: 'center',
xtype: 'tabpanel',
id: 'vpCenter',
items: [{
id: 'vpCenterTab1',
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically',
},{
id: 'vpCenterTab2',
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically',
}]
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100,
}]
});
}


i have 2 windows instantiated and inserted into the center region of the viewport using renderTo: 'vpCenter', but i cant seem to insert them into one of the tabs using renderTo: 'vpCenterTab1', i have given the tabs id's.



function createBox1(){
box1 = new Ext.Panel({
renderTo: 'box1',
width: '200px',
title: 'My Title',
html: 'none',
style: '',
collapsible: false,
header : false
});
box1Mgr = box1.getUpdater();
win1 = new Ext.Window({
id: 'window1',
x: 10,
y: 40,
width:400,
height:200,
title:"Ext Window Example",
minimizable : true,
maximizable : true,
renderTo: 'vpCenter',
contentEl: 'box1'
});
win1.show();
t = vp.findById('vpCenterTab2');
t.insert(1, win1);
updateBox1();
}
function createBox2(){
box2 = new Ext.Panel({
renderTo: 'box2',
width: '400px',
title: 'My Title',
html: 'none',
style: '',
collapsible: false,
header : false
});
box2Mgr = box2.getUpdater();
box2Mgr.update({
url: "guestbook",
params: {
param1: "foo",
param2: "bar"
}
});
win2 = new Ext.Window({
id: 'window2',
x: 430,
y: 40,
width:400,
height:450,
title:"Ext Window Example",
minimizable : true,
maximizable : true,
renderTo: 'vpCenter',
contentEl: 'box2'
});
win2.show();
}



Any help much appreciated

tryanDLS
6 Mar 2009, 8:50 AM
Why are using windows instead of simple panels?

rvent
6 Mar 2009, 2:26 PM
Because windows kind of simulate MDIs.

All it has to be done is to do MyWindow.show()

It floats all over the viewport so you need to do some custom stuff to get it to float within the center region only.

nadeemshafi9
6 Mar 2009, 2:59 PM
Why are using windows instead of simple panels?
because i have been asked to demonstrate usage for a new job, and the guy seems to like windows, is there a negative afect of them ?, basicaly i whant to insert teh window into a tab panel so i can have different windows in each panel.

or is the silly ? im not sure keep commenting i am listening

nadeemshafi9
6 Mar 2009, 3:04 PM
Because windows kind of simulate MDIs.

All it has to be done is to do MyWindow.show()

It floats all over the viewport so you need to do some custom stuff to get it to float within the center region only.

i have it inserted into teh center port, it works nicley it dosent leave the center port and now i have it cascaded aswell using its absolure x y paramiters, althogh it is nicley inside teh center port and not in left or right or north, it wont go inside teh tabs in center the tabs change the wndows do not change woth teh tabs.

but it is inside teh center viewport segment and you can feel that from moving it, it wont leave teh center.

mjlecomte
6 Mar 2009, 3:06 PM
So is that what you wanted, or did you want the window to be able to move anywhere on the screen?

nadeemshafi9
6 Mar 2009, 3:12 PM
So is that what you wanted, or did you want the window to be able to move anywhere on the screen?


it is almost what i want, i purposfully put it inside the center panel,

now i have two tabbed panels inside the center panel aswell

i need to place teh window inside one fo the tabbed panels, so when i flick throgh them, my windows are inside only one tabbed panel which itself is inside the center panel.


you see, the windows are inside the center panel and the center panel has a tabbed panel inside it, which is predifined inside the center panels creation,

but the windows are not inside one of the tabbed they are floating on top of the tabs

how do i insert the window into the tab which is insid ethe center viewport, instead of inserting it into the center viewport only?


i have done this in the windows renderTo: 'vpCenter',

but i would like to do this renderTo: 'vpCenterTab1',

but that dosent work, i have defined the id id : 'vpCentertab1',

and

id : 'vpCenterTab2',

mjlecomte
6 Mar 2009, 3:21 PM
Not a typical use case. I think you're going to need to listen to one of the tabchange events and when that tab's activation state changes you manually call hide/show on the window.

That or perhaps you have rendered to the wrong element, picking the tab panel instead of the child item.

Yes, I see you're rendering to the element for the TabPanel itself. You could try rendering to the child item you want that window to be bound to, I don't know if that will work though (I haven't tried it with containers that get hidden).

nadeemshafi9
6 Mar 2009, 3:23 PM
Not a typical use case. I think you're going to need to listen to one of the tabchange events and when that tab's activation state changes you manually call hide/show on the window.

That or perhaps you have rendered to the wrong element, picking the tab panel instead of the child item.

Yes, I see you're rendering to the element for the TabPanel itself. You could try rendering to the child item you want that window to be bound to, I don't know if that will work though (I haven't tried it with containers that get hidden).


both methods sound very good i will give them both a shot, thanks verry much