extjs 4 portail exemple

Je tiens à dire que je suis aux prises avec la compréhension du portail de démonstration dans ExtJS 4. Quelqu'un peut s'il vous plaît me fournir un exemple générique d'un récipient et ajouter un portlet de l'élément. La documentation fournie avec le téléchargement n'avez pas le mot de portail ou de portlet quand je fais la recherche. Quand je regarde la source de l'exemple il y a des catégories de fichiers et extra CSS fichiers trop. Sont nécessaires? J'ai cherché partout sur le web et ne semblent trouver d'autres personnes posent la même question. Toute aide ou même un lien vers une démo pour extjs 4 serait grandement apprécié. Peut-être que mon googlefoo manque?

Lorsque j'utilise la démo et de commencer à modifier la frontière de disposition je rencontre toutes sortes de questions. La région centre ne peut pas contenir un panneau à onglets, j'utilise de l'accordéon mises en page pour ma à l'est, l'ouest, le nord et les régions. Il semble y avoir un problème avec la région de l'Ouest et ayant un accordéon de mise en page, car il ne s'affiche pas correctement ie. l'accordéon, c'est comme à moitié ouverte et toute les images ne s'affichent pas, sauf si vous l'effondrement et ouvrez-le à nouveau. Quelqu'un pour être en mesure de me fournir un exemple qui montre comment faire un portail de base sans ajout de fonctionnalité? Ci-dessous le code que j'utilisais qui ne fonctionnait pas mais affiche et fonctionne très bien (sauf pour le portail de la partie) l'utilisation d'une fenêtre d'affichage.

Voici un exemple de 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);
}
});