PDA

View Full Version : portal (Viewport) in ajax tab



nuno.s
14 Dec 2009, 10:18 AM
Is it possible to load an extjs portal (viewport, from the extjs samples) in an ajax tab?
I have the following code based on the extjs examples:



/*!
* Ext JS Library 3.0.3
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){

// second tabs built from JS
var tabs2 = new Ext.TabPanel({
renderTo: 't',
activeTab: 0,
width:640,
height:480,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Normal Tab',
autoLoad:{
url: 'http://127.0.0.1/ext-3.0.3/examples/portal/portal.html',
method:'GET',
scripts:true,
disableCaching:true
},
listeners:{
activate : function(tabpanel){
tabpanel.getUpdater().refresh();
}

}
}
]
});

function handleActivate(tab){
alert(tab.title + ' was activated.');
}
});


portal.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom Layouts and Containers - Portal Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->
<link rel="stylesheet" type="text/css" href="../ux/css/Portal.css" />

<!-- page specific -->
<link rel="stylesheet" type="text/css" href="sample.css" />
<style type="text/css">

</style>

<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="../../ext-all.js"></script>

<!-- overrides to base library -->

<!-- extensions -->
<script type="text/javascript" src="../ux/Portal.js"></script>
<script type="text/javascript" src="../ux/PortalColumn.js"></script>
<script type="text/javascript" src="../ux/Portlet.js"></script>

<!-- page specific -->
<script type="text/javascript" src="sample-grid.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>

<script type="text/javascript" src="portal.js"></script>

</head>
<body></body>
</html>
portal.js


/*!
* Ext JS Library 3.0.3
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
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());

// create some portlet tools using built in Ext tool ids
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

var viewport = new Ext.Viewport({
layout:'border',
items:[{
xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'Another Panel 1',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]

/*
* Uncomment this block to test handling of the drop event. You could use this
* to save portlet position state for example. The event arg e is the custom
* event defined in Ext.ux.Portal.DropZone.
*/
// ,listeners: {
// 'drop': function(e){
// Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
// e.columnIndex + '<br />Position: ' + e.position);
// }
// }
}]
});
});