PDA

View Full Version : viewport into viewport



kurt schrauwen
9 Jul 2010, 2:47 AM
Hey everyone,

I'm having a problem with displaying viewport into another viewport.

I have created a viewport where the center part is a portal, on the left side I show some data in some chart and a grid, noproblem there. But on the right part I want to display an other viewport with collapse functionality.

the second viewport I put in an other js file.

when I run the html file, I get no errors, I see my 4 panels but I get no data in the fourth panel.

Can someone give me a hint where I'm going wrong ?



<html>
<head>
<!--
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-->
<meta name="Copyright" content="Copyright � 2009-2010 HERFURTH GROUP, All Rights Reserved">

<title>Credit Control History Portal</title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/sds_css/sds_icons.css">
<link rel="stylesheet" type="text/css" href="/vvresources/sds_css/sds_portal.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/sds_css/Ext.ux.grid.ProgressColumn.css" />

<style type="text/css">
.button_selectGroup { background-image:url(/vvresources/icons/database_refresh.png) !important; }
.button_001 { background-image:url(/vvresources/icons/asterisk_orange.png) !important; }
</style>

<!-- JS - ExtJS -->
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence.js"></script>

<!-- JS - extensions -->
<script type="text/javascript" src="/vvresources/sds_scripts/Portal.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/PortalColumn.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/Portlet.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/PageSizePlugin.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/tdgi.borderLayout.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/Ext.ux.grid.ProgressColumn.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/FilterRow.js"></script>

<!-- JS - Credit Control History
<script type="text/javascript" src="/vvresources/sds_js_main/cch_dddw.js"></script>
-->
<script type="text/javascript" src="/vvresources/sds_js_main/cch_chart.js"></script>
<script type="text/javascript" src="/vvresources/sds_js_main/cch_customer_panel.js"></script>


<script>

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

/* FUNCTIONS */





/* LAYOUT */

/* Toolbar */
var CCH_toolbar = new Ext.Toolbar({
renderTo: document.body,
items: [{ xtype: 'tbbutton',
text: 'Activate Panels',
cls: 'x-btn-text-icon' ,
iconCls:'button_001',
tooltip: 'Click to activate panels',
handler: function(){
Ext.MessageBox.alert('Underconstruction','Here comes a dropdown menu with the panels for reactivation')
}
}
,{ xtype:'tbseparator' }
,{ xtype: 'tbbutton',
text: 'Menu 01',
cls: 'x-btn-text-icon' ,
iconCls:'button_001',
tooltip: 'Click to activate menu 01',
handler: function(){
Ext.MessageBox.alert('Underconstruction','You clicked menu button 01')
}
}
,{ xtype:'tbseparator' }
,{ xtype: 'tbbutton',
text: 'Menu 02',
cls: 'x-btn-text-icon' ,
iconCls:'button_001',
tooltip: 'Click to activate menu 02',
handler: function(){
Ext.MessageBox.alert('Underconstruction','You clicked menu button 02')
}
}
]
});


/* Portlet Tools */
var CCH_panel_tools = [
{ id:'refresh',
qtip: 'Reload Panel',
handler: function(e, target, panel){

Ext.MessageBox.alert('Portal Example',panel.title + 'You click the reload tool button!')

if(panel.el.id == 'panel_01'){
Ext.MessageBox.alert('DEBUG','Reload Panel 01')
//load_groupOutstanding();
}
if(panel.el.id == 'panel_02'){
Ext.MessageBox.alert('DEBUG','Reload Panel 02')
//load_groupOutstanding();
}
if(panel.el.id == 'panel_03'){
Ext.MessageBox.alert('DEBUG','Reload Panel 03')
//load_groupOutstanding();
}
if(panel.el.id == 'panel_04'){
Ext.MessageBox.alert('DEBUG','Reload Panel 04')
//load_groupOutstanding();
}

}
}
,
{ id:'minimize',
hidden:true,
qtip: 'Minimize Panel',
handler: function(e, target, panel){

var panelCollection = Ext.getCmp("center-panel");
var hiddenPanel = Ext.getCmp("center-panel-col0");
var index = 0;

hiddenPanel.remove(panel,false);
hiddenPanel.hide();

panel.tools['toggle'].setVisible(true);
panel.tools['maximize'].setVisible(true);
panel.tools['minimize'].setVisible(false);
panel.setSize(panel.originalSize);

panel.originalOwnerCt.insert(panel.originalPosition, panel);
panel.originalOwnerCt.doLayout();

while(index < panelCollection.items.keys.length){
if(panelCollection.items.keys[index] != hiddenPanel.id){
panelCollection.items.items[index].el.setDisplayed("inline");
}
++index;
}

panelCollection.doLayout();
}
}
,
{ id:'maximize',
qtip: 'Maximize Panel',
handler: function(e, target, panel){

panel.originalOwnerCt = panel.ownerCt;
panel.originalPosition = panel.ownerCt.items.indexOf(panel);
panel.originalSize=panel.getSize();

var panelCollection = Ext.getCmp("center-panel");
var hiddenPanel = Ext.getCmp("center-panel-col0");
var index = 0;

while(index < panelCollection.items.keys.length){
if(panelCollection.items.keys[index] != hiddenPanel.id){
panelCollection.items.items[index].el.setDisplayed("none");
}
++index;
}

panel.ownerCt.remove(panel,false);

hiddenPanel.items.add(panel);
hiddenPanel.setSize(hiddenPanel.ownerCt.getSize());
hiddenPanel.doLayout();
hiddenPanel.show();

panel.tools['toggle'].setVisible(false);
panel.tools['maximize'].setVisible(false);
panel.tools['minimize'].setVisible(true);

panel.setWidth(hiddenPanel.ownerCt.getInnerWidth());
panel.setHeight(hiddenPanel.ownerCt.getInnerHeight());
}
}
];


/* Panels */
var panel_01 = new Ext.Panel({
//width:400,
//height:200,
autoWidth:true,
autoHeight:true,
//items:chart_cch_OutstandingRevenue
html: 'Panel 1'
});

var panel_02 = new Ext.Panel({
//width:400,
//height:200,
autoWidth:true,
autoHeight:true,
//items:chart_group_outstanding
html: 'Panel 2'
});

var panel_03 = new Ext.Panel({
//width:400,
//height:200,
autoWidth:true,
autoHeight:true,
//items:chart_group_outstanding
html: 'Panel 3'
});

var panel_customers = new Ext.Panel({
//width:400,
//height:200,
autoWidth:true,
autoHeight:true,
items:customerViewport
//html: 'Customers'
});



/* Viewport */

var viewport = new Ext.Viewport({
layout:'tdgi_border',
renderTo: Ext.getBody(),
items:[ { region: "north"
,id:'CCH_toolbar'
,xtype:'CCH_toolbar'
,xtype: 'panel'
,height:25
}
,
{
xtype:'portal',
region:'center',
//margins:'5 5 5 5',
id:'center-panel',
autoScroll:false,
items:[ { columnWidth:0,
id:'center-panel-col0',
layout:'fit',
hidden:true
},{ columnWidth:.33,
id:'center-panel-col2',
style:'padding:10px 0 10px 10px',
items:[{ id:'panel_01',
title: 'Panel 1',
tools: CCH_panel_tools,
height:250,
items:panel_01
}
,{ id:'panel_02',
title: 'Panel 2',
tools: CCH_panel_tools,
height:250,
items:panel_02
}
,{ id:'panel_03',
title: 'Panel 3',
tools: CCH_panel_tools,
height:250,
//layout:'fit',
items:panel_03
}
]
},{ columnWidth:.66,
id:'center-panel-col1',
style:'padding:10px 0 10px 10px',
items:[{ id:'panel_customers',
title: 'Customer(s)',
tools: CCH_panel_tools,
height:770,
layout:'fit',
items:customerViewport
}
]
}]
}]
});

});
</script>

</head>

<body></body>

</html>

the second viewport




/* Customer Grid */
var customerExportToCSV = function() {

}


var ds_customer_grid = new Ext.data.JsonStore({
fields:['CUSTOMERNAME','CUSTOMERADRES','CUSTOMERTEL'],
data: [
{CUSTOMERNAME:'IBS', CUSTOMERADRES: 'Helldrive 666', CUSTOMERTEL: '+32(0)123456789'},
{CUSTOMERNAME:'IPTOR', CUSTOMERADRES: 'Vermoeide Straat 7', CUSTOMERTEL: '+32(0)987654321'}
]});

var filterRow = new Ext.ux.grid.FilterRow();

var colModel_customer_grid = new Ext.grid.ColumnModel({
//defaults: { sortable: true
//},
columns:[
new Ext.grid.RowNumberer(),
{header: "<b>CUSTOMERNAME</b>", dataIndex:'CUSTOMERNAME', width:250, filter:{} },
{header: "<b>CUSTOMERADRES</b>", dataIndex:'CUSTOMERADRES', width:150, filter:{} },
{header: "<b>CUSTOMERTEL</b>", dataIndex:'CUSTOMERTEL', width:150, filter:{} }
]
});

var customer_grid = new Ext.grid.GridPanel({
id:'customer_grid',
autoScroll: true,
trackMouseOver: true,
stripeRows: true,
store: ds_customer_grid,
columnLines: true,
enableColumnMove: false,
cm: colModel_customer_grid,
viewConfig: {
forceFit:true
},
tbar:[ { xtype: 'tbbutton',
cls: 'x-btn-text-icon',
icon: '../../vvresources/icons/page_excel.png',
text: 'Export to CSV',
handler: customerExportToCSV
},'-'
],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: ds_customer_grid,
displayInfo: true,
displayMsg: 'Displaying record(s) {0} - {1} of {2}',
emptyMsg: "No records to display",
plugins: [new Ext.ux.PageSizePlugin({editable:false, forceSelection:true})]
}),
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
plugins: [filterRow]
});


/* Customer Tab Panel */

function tabpanel_customers_detail_activate(tab){
alert(tab.id + ' was activated');
}

var tabpanel_customers_detail = new Ext.TabPanel({
activeTab: 0,
plain:true,
//border:false,
items:[ { id:'customer-detail',
title: 'Customer Detail',
listeners: {activate: tabpanel_customers_detail_activate},
html: "Customer detail"
},
{ id:'customer-company',
title: 'Customer company(s)',
listeners: {activate: tabpanel_customers_detail_activate},
html: "Customer companys + pie chart"
},
{ id:'customer-outstanding',
title: 'Customer Outstanding & Revenue',
listeners: {activate: tabpanel_customers_detail_activate},
html: "customer Outstanding + Revenue from the customer"
},
{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});



/* Viewport */

var customerViewport = new Ext.Viewport({
layout:'tdgi_border',
//renderTo: Ext.getBody(),
items: [//{ region: "north",
// xtype: 'panel',
// id:'customers-tool-bar',
// height:30,
// html: 'toolBar'
//},
{ region: 'center',
xtype: 'panel',
id:'customers-grid-master',
layout:'fit',
items:customer_grid
//html: 'Center'
},
{ region: 'south',
xtype: 'panel',
id:'customers-tabpanel-detail',
title: 'Detail information for customer :',
height:200,
minSize:200,
maxSize:350,
layout:'fit',
split: true,
frame:true,
collapsible: true,
collapsedTitle:{
element : {
tag : 'div', // Required
html : 'Click here for detailed customer information !', // Required
//cls: '.sds-collapsed-title'
style : "color:#15428b; font:11px/15px tahoma,arial,verdana,sans-serif; font-weight: bold; padding:2px 5px;"
}
},
items:tabpanel_customers_detail
//html: 'South'
}
]
});


Thank you,
Kurt

Animal
9 Jul 2010, 2:57 AM
There can only be one Viewport.

It encapsulated the <body> element.

Read the docs. You mean Container with a layout

kurt schrauwen
9 Jul 2010, 3:06 AM
Hai everybody,

I have a problem with a viewport into viewport.

I made a viewport with in the center xtype : portal, in this portal I have two colums, on the left I have tree panels with data, no problem there. But in the right colomn I have a panel where I want to show an other viewport.
When I run the html file I get no errors in ff but I don't get to see my viewport, when I run this viewport sepparetly there is no problem.

Can someone give me a hint of what I'm doing wrong ?

html page :


<html>
<head>
<!--
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-->
<meta name="Copyright" content="Copyright � 2009-2010 HERFURTH GROUP, All Rights Reserved">

<title>Credit Control History Portal</title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/sds_css/sds_icons.css">
<link rel="stylesheet" type="text/css" href="/vvresources/sds_css/sds_portal.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/sds_css/Ext.ux.grid.ProgressColumn.css" />

<style type="text/css">
.button_selectGroup { background-image:url(/vvresources/icons/database_refresh.png) !important; }
.button_001 { background-image:url(/vvresources/icons/asterisk_orange.png) !important; }
</style>

<!-- JS - ExtJS -->
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence.js"></script>

<!-- JS - extensions -->
<script type="text/javascript" src="/vvresources/sds_scripts/Portal.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/PortalColumn.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/Portlet.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/PageSizePlugin.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/tdgi.borderLayout.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/Ext.ux.grid.ProgressColumn.js"></script>
<script type="text/javascript" src="/vvresources/sds_scripts/FilterRow.js"></script>

<!-- JS - Credit Control History
<script type="text/javascript" src="/vvresources/sds_js_main/cch_dddw.js"></script>
-->
<script type="text/javascript" src="/vvresources/sds_js_main/cch_chart.js"></script>
<script type="text/javascript" src="/vvresources/sds_js_main/cch_customer_panel.js"></script>


<script>

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

/* FUNCTIONS */





/* LAYOUT */

/* Toolbar */
var CCH_toolbar = new Ext.Toolbar({
renderTo: document.body,
items: [{ xtype: 'tbbutton',
text: 'Activate Panels',
cls: 'x-btn-text-icon' ,
iconCls:'button_001',
tooltip: 'Click to activate panels',
handler: function(){
Ext.MessageBox.alert('Underconstruction','Here comes a dropdown menu with the panels for reactivation')
}
}
,{ xtype:'tbseparator' }
,{ xtype: 'tbbutton',
text: 'Menu 01',
cls: 'x-btn-text-icon' ,
iconCls:'button_001',
tooltip: 'Click to activate menu 01',
handler: function(){
Ext.MessageBox.alert('Underconstruction','You clicked menu button 01')
}
}
,{ xtype:'tbseparator' }
,{ xtype: 'tbbutton',
text: 'Menu 02',
cls: 'x-btn-text-icon' ,
iconCls:'button_001',
tooltip: 'Click to activate menu 02',
handler: function(){
Ext.MessageBox.alert('Underconstruction','You clicked menu button 02')
}
}
]
});


/* Portlet Tools */
var CCH_panel_tools = [
{ id:'refresh',
qtip: 'Reload Panel',
handler: function(e, target, panel){

Ext.MessageBox.alert('Portal Example',panel.title + 'You click the reload tool button!')

if(panel.el.id == 'panel_01'){
Ext.MessageBox.alert('DEBUG','Reload Panel 01')
//load_groupOutstanding();
}
if(panel.el.id == 'panel_02'){
Ext.MessageBox.alert('DEBUG','Reload Panel 02')
//load_groupOutstanding();
}
if(panel.el.id == 'panel_03'){
Ext.MessageBox.alert('DEBUG','Reload Panel 03')
//load_groupOutstanding();
}
if(panel.el.id == 'panel_04'){
Ext.MessageBox.alert('DEBUG','Reload Panel 04')
//load_groupOutstanding();
}

}
}
,
{ id:'minimize',
hidden:true,
qtip: 'Minimize Panel',
handler: function(e, target, panel){

var panelCollection = Ext.getCmp("center-panel");
var hiddenPanel = Ext.getCmp("center-panel-col0");
var index = 0;

hiddenPanel.remove(panel,false);
hiddenPanel.hide();

panel.tools['toggle'].setVisible(true);
panel.tools['maximize'].setVisible(true);
panel.tools['minimize'].setVisible(false);
panel.setSize(panel.originalSize);

panel.originalOwnerCt.insert(panel.originalPosition, panel);
panel.originalOwnerCt.doLayout();

while(index < panelCollection.items.keys.length){
if(panelCollection.items.keys[index] != hiddenPanel.id){
panelCollection.items.items[index].el.setDisplayed("inline");
}
++index;
}

panelCollection.doLayout();
}
}
,
{ id:'maximize',
qtip: 'Maximize Panel',
handler: function(e, target, panel){

panel.originalOwnerCt = panel.ownerCt;
panel.originalPosition = panel.ownerCt.items.indexOf(panel);
panel.originalSize=panel.getSize();

var panelCollection = Ext.getCmp("center-panel");
var hiddenPanel = Ext.getCmp("center-panel-col0");
var index = 0;

while(index < panelCollection.items.keys.length){
if(panelCollection.items.keys[index] != hiddenPanel.id){
panelCollection.items.items[index].el.setDisplayed("none");
}
++index;
}

panel.ownerCt.remove(panel,false);

hiddenPanel.items.add(panel);
hiddenPanel.setSize(hiddenPanel.ownerCt.getSize());
hiddenPanel.doLayout();
hiddenPanel.show();

panel.tools['toggle'].setVisible(false);
panel.tools['maximize'].setVisible(false);
panel.tools['minimize'].setVisible(true);

panel.setWidth(hiddenPanel.ownerCt.getInnerWidth());
panel.setHeight(hiddenPanel.ownerCt.getInnerHeight());
}
}
];


/* Panels */
var panel_01 = new Ext.Panel({
//width:400,
//height:200,
autoWidth:true,
autoHeight:true,
//items:chart_cch_OutstandingRevenue
html: 'Panel 1'
});

var panel_02 = new Ext.Panel({
//width:400,
//height:200,
autoWidth:true,
autoHeight:true,
//items:chart_group_outstanding
html: 'Panel 2'
});

var panel_03 = new Ext.Panel({
//width:400,
//height:200,
autoWidth:true,
autoHeight:true,
//items:chart_group_outstanding
html: 'Panel 3'
});

var panel_customers = new Ext.Panel({
//width:400,
//height:200,
autoWidth:true,
autoHeight:true,
items:customerViewport
//html: 'Customers'
});



/* Viewport */

var viewport = new Ext.Viewport({
layout:'tdgi_border',
renderTo: Ext.getBody(),
items:[ { region: "north"
,id:'CCH_toolbar'
,xtype:'CCH_toolbar'
,xtype: 'panel'
,height:25
}
,
{
xtype:'portal',
region:'center',
//margins:'5 5 5 5',
id:'center-panel',
autoScroll:false,
items:[ { columnWidth:0,
id:'center-panel-col0',
layout:'fit',
hidden:true
},{ columnWidth:.33,
id:'center-panel-col2',
style:'padding:10px 0 10px 10px',
items:[{ id:'panel_01',
title: 'Panel 1',
tools: CCH_panel_tools,
height:250,
items:panel_01
}
,{ id:'panel_02',
title: 'Panel 2',
tools: CCH_panel_tools,
height:250,
items:panel_02
}
,{ id:'panel_03',
title: 'Panel 3',
tools: CCH_panel_tools,
height:250,
//layout:'fit',
items:panel_03
}
]
},{ columnWidth:.66,
id:'center-panel-col1',
style:'padding:10px 0 10px 10px',
items:[{ id:'panel_customers',
title: 'Customer(s)',
tools: CCH_panel_tools,
height:770,
layout:'fit',
items:customerViewport
}
]
}]
}]
});

});
</script>

</head>

<body></body>

</html>


Code customers viewport :



/* Customer Grid */
var customerExportToCSV = function() {

}


var ds_customer_grid = new Ext.data.JsonStore({
fields:['CUSTOMERNAME','CUSTOMERADRES','CUSTOMERTEL'],
data: [
{CUSTOMERNAME:'IBS', CUSTOMERADRES: 'Helldrive 666', CUSTOMERTEL: '+32(0)123456789'},
{CUSTOMERNAME:'IPTOR', CUSTOMERADRES: 'Vermoeide Straat 7', CUSTOMERTEL: '+32(0)987654321'}
]});

var filterRow = new Ext.ux.grid.FilterRow();

var colModel_customer_grid = new Ext.grid.ColumnModel({
//defaults: { sortable: true
//},
columns:[
new Ext.grid.RowNumberer(),
{header: "<b>CUSTOMERNAME</b>", dataIndex:'CUSTOMERNAME', width:250, filter:{} },
{header: "<b>CUSTOMERADRES</b>", dataIndex:'CUSTOMERADRES', width:150, filter:{} },
{header: "<b>CUSTOMERTEL</b>", dataIndex:'CUSTOMERTEL', width:150, filter:{} }
]
});

var customer_grid = new Ext.grid.GridPanel({
id:'customer_grid',
autoScroll: true,
trackMouseOver: true,
stripeRows: true,
store: ds_customer_grid,
columnLines: true,
enableColumnMove: false,
cm: colModel_customer_grid,
viewConfig: {
forceFit:true
},
tbar:[ { xtype: 'tbbutton',
cls: 'x-btn-text-icon',
icon: '../../vvresources/icons/page_excel.png',
text: 'Export to CSV',
handler: customerExportToCSV
},'-'
],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: ds_customer_grid,
displayInfo: true,
displayMsg: 'Displaying record(s) {0} - {1} of {2}',
emptyMsg: "No records to display",
plugins: [new Ext.ux.PageSizePlugin({editable:false, forceSelection:true})]
}),
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
plugins: [filterRow]
});


/* Customer Tab Panel */

function tabpanel_customers_detail_activate(tab){
alert(tab.id + ' was activated');
}

var tabpanel_customers_detail = new Ext.TabPanel({
activeTab: 0,
plain:true,
//border:false,
items:[ { id:'customer-detail',
title: 'Customer Detail',
listeners: {activate: tabpanel_customers_detail_activate},
html: "Customer detail"
},
{ id:'customer-company',
title: 'Customer company(s)',
listeners: {activate: tabpanel_customers_detail_activate},
html: "Customer companys + pie chart"
},
{ id:'customer-outstanding',
title: 'Customer Outstanding & Revenue',
listeners: {activate: tabpanel_customers_detail_activate},
html: "customer Outstanding + Revenue from the customer"
},
{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});



/* Viewport */

var customerViewport = new Ext.Viewport({
layout:'tdgi_border',
//renderTo: Ext.getBody(),
items: [//{ region: "north",
// xtype: 'panel',
// id:'customers-tool-bar',
// height:30,
// html: 'toolBar'
//},
{ region: 'center',
xtype: 'panel',
id:'customers-grid-master',
layout:'fit',
items:customer_grid
//html: 'Center'
},
{ region: 'south',
xtype: 'panel',
id:'customers-tabpanel-detail',
title: 'Detail information for customer :',
height:200,
minSize:200,
maxSize:350,
layout:'fit',
split: true,
frame:true,
collapsible: true,
collapsedTitle:{
element : {
tag : 'div', // Required
html : 'Click here for detailed customer information !', // Required
//cls: '.sds-collapsed-title'
style : "color:#15428b; font:11px/15px tahoma,arial,verdana,sans-serif; font-weight: bold; padding:2px 5px;"
}
},
items:tabpanel_customers_detail
//html: 'South'
}
]
});

tvanzoelen
9 Jul 2010, 5:25 AM
It is all in the docs


A specialized container representing the viewable application area (the browser viewport).

The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

kurt schrauwen
9 Jul 2010, 5:31 AM
Hai tvanzoelen,

Thanks for this !

Now that I know this, my next question is how can I use the expand functionality that I have with a viewport into a panel.
Is there a way to do this ?

Thanks,
Kurt

Animal
9 Jul 2010, 5:48 AM
How have you got so much code (hint: very few people will read that much code on a forum) without knowing this?

Panels (Are you SURE you need a Panel? Perhaps it only has to be a Container) arrange their child items using a LAYOUT manager.

This really is all explained in the API docs.

CrazyEnigma
9 Jul 2010, 11:31 PM
Viewport is a specialized implementation of Panel that has a layout of border.

Animal
9 Jul 2010, 11:35 PM
That is entirely incorrect.

Viewport is a specialized implementation of Container which you configure with any layout you want.

CrazyEnigma
9 Jul 2010, 11:45 PM
Ah, that means I should go back and instantiate container instead of specifying panel with the layout border or any multiple component rendering. I get what you mean by overnesting now. Or even subclass misuse.

What then with the question: two containers with layout of border. one container within the other in one of the regions, or can you just stack up the regions?

Animal
9 Jul 2010, 11:53 PM
You can nest Containers to any level if you want.

you just have to think about what the apps needs are ad only do what is necessary.