I would like to say that Im struggling with understanding the portal demo in ExtJS 4. Can someone please just provide me a generic example of a container and how to add a portlet item. The docs provided with the download do not have the word portal or portlet when I do the search. When I look at the source of the example there are classes files and extra CSS files too. Are those needed? I have searched all over the web and only seem to find other people asking the same question. Any help or even a link to a demo for extjs 4 would be greatly appreciated. Maybe my googlefoo is lacking?
When I use the demo and start modifying the border layout I run into all sorts of issues. The center region cannot contain a tab panel, I use accordion layouts for my east, west, and north regions. There seems to be an issue with the West region and having an accordion layout because it does not display properly ie. the accordion is like half open and any images inside do not display unless you collapse and then re-open. Would someone be able to provide me with an example that just shows how to make a basic portal without any added functionality? Below is the code I was using that was not working properly but displays and works fine (except for the portal part) when using just a viewport.
Here is some example code
Ext.define('Ext.app.Portal', {
extend: 'Ext.container.Viewport',
uses: ['Ext.app.PortalPanel'],
initComponent: function(){
Ext.apply(this, Ext.create('Ext.Viewport', {
id: 'main-viewport',
layout: {
type: 'border',
padding: '0 5 5 5'
},
items: [{
title: 'My Notifications',
id: 'My-Notifications-Panel',
region: 'north',
height: 300,
split: true,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'accordion',
items: [
{
title: 'Alerts'
},{
title: 'Communications'
}
]
},{
title: 'My Support',
id: 'My-Support-Panel',
region: 'east',
width: 140,
collapsible: true,
collapsed: true,
margins: '0 0 0 0',
layout: 'column',
autoScroll: true,
defaults: {
margins: '10 5 0 0',
xtype: 'panel',
height: 100,
width: '100%',
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items:[
{
title: 'Customer Services'
},{
title: 'Technical Support',
listeners: {
afterrender: function(c){
c.el.on('click', function(){
CreateChatSession();
Ext.getCmp('My-Support-Chat-Panel').update('<iframe width="100%" height="700" src="/pub/" frameborder="0"></iframe>');
});
}
}
}
]
},{
xtype: 'panel',
region: 'west',
collapsible: true,
collapsed: true,
title: 'My Apps',
width: 275,
layout:'accordion',
split: true,
margins: '0 0 0 0',
defaults: {
bodyStyle: 'padding:15px',
layout: 'column'
},
items: [{
title: 'Internal Apps',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Favorites',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
},{
title: 'Reporting',
defaults: {
padding: '5 5 5 5',
xtype: 'panel',
height: 100,
width: 80,
headerPosition: 'bottom',
border: false,
cls: 'myicon',
bodyStyle: 'background-image: url(images/icon.png); background-repeat: no-repeat; background-position: center;'
},
items: []
}]
},
Ext.create('Ext.tab.Panel', {
region: 'center',
layout: 'fit',
items: [{
id: 'Workspace-1',
title: 'Workspace 1',
layout: 'fit',
items: [{
id: 'app-portal',
xtype: 'portalpanel',
region: 'center',
items: [{
id: 'col-1',
items: [{
id: 'portlet-2',
title: 'Portlet 2',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
},{
id: 'col-2',
items: [{
id: 'portlet-3',
title: 'Portlet 3',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
}
}]
}]
}]
}]
})
]
}));
this.callParent(arguments);
}
});
