PDA

View Full Version : is it possible to add a window in a tab?



jaisonjames
11 Nov 2010, 2:11 AM
is it possible to add a window in a tab?

steffenk
11 Nov 2010, 2:15 AM
yes, but why? a tab is already a panel.

jaisonjames
11 Nov 2010, 2:24 AM
Thanks for the replay :)

I beginner in extJS. I need to add some dragable window in each tab content area.

I have written code like this

var w = new Ext.Window({
title: 'My Chart 01',
collapsible: true,
maximizable: true,
width: '40%',
height: 250,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
x:'5%', y:90,
items: [{
html:'<div id="mychartsub01"></div>'
}]
});
w.show('dashboards');

Then put one div in body like this <div id="dashboards" ></div>

But window not rendering inside of <div id="dashboards" ></div>

Can you give me a solution?

Thanks

jaisonjames
11 Nov 2010, 2:45 AM
yes, but why? a tab is already a panel.

Thanks for the replay :)

I beginner in extJS. I need to add some dragable window in each tab content area.

I have written code like this

var w = new Ext.Window({
title: 'My Chart 01',
collapsible: true,
maximizable: true,
width: '40%',
height: 250,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
x:'5%', y:90,
items: [{
html:'<div id="mychartsub01"></div>'
}]
});
w.show('dashboards');

Then put one div in body like this <div id="dashboards" ></div>

But window not rendering inside of <div id="dashboards" ></div>

Can you give me a solution?

Thanks

steffenk
11 Nov 2010, 2:57 AM
simply with renderTo in properties.
Example: http://dev.sk-typo3.de/ext/panelwindows.html

jaisonjames
11 Nov 2010, 3:24 AM
I have already tried renderTo property, But unfortunately its not working for me.

Please have a look below code.

<script type="text/javascript">
Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout: 'border',
items: [
new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'dashboard-panel',
title: '<b>CIO Command Center<b>',
autoScroll: true
},
{
contentEl: 'db-chart01-details',
title: 'Close Me',
closable: true,
autoScroll: true
}]
})]
});
});
</script>

</head>
<body>
<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="dashboard-panel" class="x-hide-display">
<div id="dashboards" ></div>
</div>
<div id="db-chart01-details" class="x-hide-display">
Center Panel 2
</div>
</body>





// code for window rendering

var w = new Ext.Window({
title: 'My Chart 01',
collapsible: true,
maximizable: true,
width: '40%',
height: 250,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
x:'5%', y:90,
items: [{
html:'<div id="mychartsub01"></div>'
}]
});
w.show('dashboards');

or

new Ext.Window({
title: 'My Chart 01',
renderTo:'dashboards',
collapsible: true,
maximizable: true,
width: '40%',
height: 250,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
x:'5%', y:90,
items: [{
html:'<div id="mychartsub01"></div>'
}]
});

Waiting for your valuable suggestions.

Thanks

steffenk
11 Nov 2010, 3:39 AM
please use code boxes for code


w = new Ext.Window({
title: 'My Chart 01',
renderTo:'dashboard-panel',
collapsible: true,
maximizable: true,
width: '40%',
height: 250,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
x:'5%', y:90,
items: [
{
html:'<div id="mychartsub01"></div>'
}
]
});
w.show();

jaisonjames
11 Nov 2010, 3:57 AM
Excellent !!!! thank you very much

Condor
11 Nov 2010, 4:54 AM
Euwww! Rendering a window to a tabpage!

Windows are floating objects that should not be rendered inside other containers. Instead, you should use a panel (that looks like a window) and add() it to the tabpage, e.g.

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
xtype: 'tabpanel',
deferredRender: false,
layoutOnTabChange: true,
activeTab: 0,
items: [{
id: 'dashboard-panel'
title: '<b>CIO Command Center<b>',
autoScroll: true,
layout: 'absolute'
},
{
contentEl: 'db-chart01-details',
title: 'Close Me',
closable: true,
autoScroll: true
}]
]
});

var w = new Ext.Panel({
baseCls: 'x-window',
frame: true,
title: 'My Chart 01',
collapsible: true,
maximizable: true,
width: '40%',
height: 250,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
x:'5%', y:90,
items: [{
html:'<div id="mychartsub01"></div>'
}]
});
var tab = Ext.getCmp('dashboard-panel');
tab.add(w);
tab.doLayout();

steffenk
11 Nov 2010, 5:40 AM
it depends on what you are doing. I also use windows in a panel as container as the panel is a defined user area where user can create new elements and position them as he wants. it works well and i see no reasons not doing it if you want the full draggable support withoit extra work.

Otherwise the renderTo property would be absurd ;)

Animal
11 Nov 2010, 5:54 AM
I render Windows into a Panel's body to provide a fully flexible dashboard of statistical data. Where the user is able to size and position Windows as desired.

I do ensure that there is appropriate code to destroy the Windows when the containing Panel is destroyed!

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/dashboard.jpg

Condor
11 Nov 2010, 6:31 AM
Wouldn't it be more in line with Ext to use a floating panel (or window) in an absolute layout container?

steffenk
11 Nov 2010, 10:59 AM
also depends. In my case customer want windows.
Also think of IDE's where you have a working panel and sidebars - you never want that a window from work panel overlaps any sidebars.

Nige's hint also is important - but i dislike that Ext doesn't take care of destroying childs correctly.

Animal
11 Nov 2010, 11:15 AM
If you render them, then they are not children, and the Panel has no knowledge of them.

Child Components of a Container are properly taken care of.

steffenk
11 Nov 2010, 1:08 PM
true, they are only DOM childs. I collect all those windows in a mixed collection which closes all when panel is destroyed.

Btw - may be interesting, i wrote an algorythm to align windows in a panel. Therefore i calculate a sortable property with
x * 10000 + y

sortElementsXY: function() {
App.ElementWindows.each(function(w) {
var x = w.position[0], y = w.position[1],
posIndex = y * 10000 + x;
w.posIndex = posIndex;
});

_fSorter = function(obj1, obj2) {
if (isFinite(obj1["posIndex"] - obj2["posIndex"])) {
return obj1["posIndex"] - obj2["posIndex"];
}
return obj1["posIndex"] > obj2["posIndex"] ? 1 : -1
}
App.ElementWindows.sort('ASC', _fSorter);
}

TimoB
3 Feb 2011, 2:16 AM
Hi !
Hey Condor,
I took your example and it is very helpful.
I am inserting a panel into a tabpanel using your tab.add method.
This is solving most of my problems.
The panel I am inserting has two regions, a north and a center.
This mostly works but there is clearly a layout problem here. Here are the problems I get
- the collapsed:true does not work on my north region
- it's height: 300 does not really render to 300px. I guess the layout: 'fit' overrides it (?)
- when the content of this tab is changed (by a function triggered in another tab), the height of the north region goes hazy (very high, bigger than the browser window) and I have to scroll way down to see my center region...
What can I do ???
Cheers,
Tim


24550

TimoB
3 Feb 2011, 2:25 AM
oh, here is my code:


var mainViewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
xtype: 'tabpanel',
deferredRender: false,
layoutOnTabChange: true,
activeTab: 0,
items:
[

{
id: 'results',
title: 'Results',
autoScroll: true
},
{
id: 'default',
bodyStyle: 'padding:15px',
autoScroll: true,
title: '<xsl:value-of select="/root/gui/strings/simpleSearch"/>',
contentEl: 'simple_search_pnl'
}
,{
id: 'advanced',
bodyStyle: 'padding:15px',
autoScroll: true,
title: '<xsl:value-of select="/root/gui/strings/advancedSearch"/>',
contentEl: 'advanced_search_pnl'
}
]
}]
});

var resultsPanel = new Ext.Panel(
{region:'center',
itemId: 'main-viewport',
layout: 'fit',
border:false,
autoScroll: true,
items:
[
{region:'north',
id: 'north-map-panel',
title: '<xsl:value-of select="/root/gui/strings/mapViewer"/>',
border:false,
layout: 'fit',
collapsible: true,
collapsed: true,
split: true,
height: 300,
minSize: 450,
//maxSize: 500,
items: [mapViewport]
},
{region:'center',
contentEl :'content',
border:false,
autoScroll: true
}
]
});

var tab = Ext.getCmp('results');
tab.add(resultsPanel);
tab.doLayout();