PDA

View Full Version : Add portal in a tabpanel



iNes14
5 Dec 2011, 1:54 AM
Hello everybody, I need your help in order to set a portal in a tabpanel.

When I cliked on a link , I show a tabpanel. In this tabpanel I want to put a portal with different window.

My code :



Ext.get('searchClient').on('click',function(){
tabs.add({
title: 'Search client',
closable:true,
items:
[
{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
items: [{
title: 'Portlet 2',
html: '<div class="portlet-content">First Window</div>'
}]
},{
items: [{
title: 'Portlet 3',
html: '<div class="portlet-content">2nd Window</div>'
}]
}]
}
]
}).show();
});


But when I clicked Firebug told me that namespace is undefined.

Can someone help me ?

Thank you

tvanzoelen
5 Dec 2011, 4:44 AM
That xtype portalpanel. Is it registered correctly?

Else post the code of that class definition.

iNes14
5 Dec 2011, 4:59 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Panel & Window</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../../extjs/examples/shared/example.css" />
<link rel="stylesheet" type="text/css" href="panel.css" />
<script type="text/javascript" src="../../../extjs/bootstrap.js"></script>

<script language="javascript" src="fade.js"></script>

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



<script language="javascript">

Ext.require([
'*'
]);


Ext.onReady(function() {



var tabs = Ext.create('Ext.tab.Panel', {
width: '89%',
height: 920,
renderTo: Ext.getBody(),
items: [{
title: 'TabPanel'
}]
});


Ext.get('searchClient').on('click',function(){
tabs.add({
title: 'Search client',
closable:true,
xtype:'tabpanel',
items:[{
title:'DashBoard User',
items:[{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
items: [{
title: 'Portlet 2',
html: '<div class="portlet-content">First Window</div>'
}]
},{
items: [{
title: 'Portlet 3',
html: '<div class="portlet-content">2nd Window</div>'
}]
}]
}]
}]
}).show();
});

});


</script>



</head>
<body>
<a class="test" id="searchClient" href="#">
SEARCH CLIENT
</a>




</body>
</html>


Are declarations in bold enough for xtype:portalpanel ?

tvanzoelen
5 Dec 2011, 5:04 AM
That one: PortalPanel.js I was interested in.

iNes14
5 Dec 2011, 5:07 AM
Ext.define('Ext.app.PortalPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.portalpanel',
requires: [
'Ext.layout.component.Body'
],


cls: 'x-portal',
bodyCls: 'x-portal-body',
defaultType: 'portalcolumn',
componentLayout: 'body',
autoScroll: true,


initComponent : function() {
var me = this;


// Implement a Container beforeLayout call from the layout to this Container
this.layout = {
type : 'column'
};
this.callParent();


this.addEvents({
validatedrop: true,
beforedragover: true,
dragover: true,
beforedrop: true,
drop: true
});
this.on('drop', this.doLayout, this);
},


beforeLayout: function() {
var items = this.layout.getLayoutItems(),
len = items.length,
i = 0,
item;


for (; i < len; i++) {
item = items[i];
item.columnWidth = 1 / len;
item.removeCls(['x-portal-column-first', 'x-portal-column-last']);
}
items[0].addCls('x-portal-column-first');
items[len - 1].addCls('x-portal-column-last');
return this.callParent(arguments);
},


initEvents : function(){
this.callParent();
this.dd = Ext.create('Ext.app.PortalDropZone', this, this.dropConfig);
},


beforeDestroy : function() {
if (this.dd) {
this.dd.unreg();
}
Ext.app.PortalPanel.superclass.beforeDestroy.call(this);
}
});

tobiu
5 Dec 2011, 5:44 AM
you are referencing to a var which is not defined in the method -> tabs.
is it defined -> console.log(tabs);

there is no need to call show() on an added tab.

you also do an overnesting: the portalpanel should be the tab, not a child of it.
if it is a child, the parent needs a layout:'fit' (although overnesting makes no sense here!).

tvanzoelen
5 Dec 2011, 5:46 AM
Or portalpael.js is not loaded correctly or namespace Ext.app doesn exist.

that namespace you can create if you use the Ext.application and define the name property. Or in your case set
Ext.namespace('Ext.app') before your portalpanel definition.

And I think tobiu is right but maybe your code does not run that far, else you would het a different error. Propbably the next error..

iNes14
5 Dec 2011, 6:07 AM
It makes no difference, even with the namespace. I can't load correctly PortalPanel.

tobiu, tabs is defined. If I delete the call of show(), my tabpanel don't have the focus.

tvanzoelen
5 Dec 2011, 9:33 AM
portalcolumn

where is it defined and is it loaded?

Jan (HL)
5 Dec 2011, 11:36 AM
The complete stack for Ext.portal is located in the examples/portal/classes.js
At least required unless the default types are modified:
<your-path-to-portal>/PortalPanel.js
<your-path-to-portal>/PortalColumn.js
<your-path-to-portal>/PortalDropZone.js
<your-path-to-portal>/Portlet.js

(I split them up into the corresponding files, however. I've no idea why not).

tvanzoelen
5 Dec 2011, 11:50 AM
I think this one is not loaded <your-path-to-portal>/PortalColumn.js in the case of this thread

iNes14
6 Dec 2011, 2:05 AM
Thank you, it's work with add of this.