extjs 4 portal Beispiel
Möchte ich sagen, dass ich kämpfen mit Verständnis für die portal-demo in ExtJS 4. Kann jemand bitte geben Sie mir ein Allgemeines Beispiel für ein container und wie Sie einen portlet-item. Die docs in der download-nicht im word-portal oder portlet-wenn ich die Suche. Wenn ich einen Blick auf die Quelle des Beispiel-es gibt Klassen-Dateien und extra CSS-Dateien. Sind diese erforderlich? Ich habe gesucht alle über das Internet und nur zu finden scheinen, anderen Menschen zu Fragen die gleiche Frage. Jede Hilfe oder sogar einen link zu einer demo für extjs 4 würde sehr geschätzt werden. Vielleicht ist meine googlefoo fehlt?
Wenn ich die demo starten ändern der border-layout, das ich in laufen alle möglichen Themen. Die center-region enthalten, nicht ein registerfeld, ich benutze Akkordeon layouts für meine Ost -, west-und Nord-Regionen. Es scheint ein Problem zu sein mit der region "West" und mit einem Akkordeon-layout, weil es wird nicht richtig angezeigt, dh. das Akkordeon ist wie halb geöffnet und alle Bilder innen nicht angezeigt, es sei denn, Sie reduzieren und dann wieder zu öffnen. Wäre jemand in der Lage, mich mit einem Beispiel, das zeigt nur, wie man ein basic-portal ohne zusätzliche Funktionalität? Unten ist der code, den ich verwendet wurde, war nicht richtig funktioniert aber angezeigt und funktioniert einwandfrei (außer für die portal-Teil) wenn nur ein viewport.
Hier finden Sie einige Beispiel-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);
}
});Ich habe bearbeitet Sie meine Frage und fügte hinzu, Beispiel-code
InformationsquelleAutor DvideBy0 | 2011-08-27
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es ' SS das portal beispielsweise mit tabs im center region
Hoffe, dies wird Ihnen helfen.
BEARBEITEN
Oder u können versuchen, dieses Beispiel ich denke, es passt besser ur braucht ,lasst es mich wissen.
ja, es funktioniert für mich, aber ur Recht, nicht ziehbar, dass ich haben beschlossen, dass Thema noch.
wenn u wirklich brauchen, die tabs und kann das problem beheben, in meinem exxample,versuchen Sie suchen in der sencha Beispiele,ich bin sicher, ich sah ein ähnliches Beispiel zu portal, sondern mit Tabletten,kann aber nicht erinnern, seinen Namen
Ich habe daran gearbeitet für 2 Wochen. Ich habe mich völlig verausgabt. Ich in der Regel versuchen, nicht zu viel Fragen hier, wenn ich einfach nicht scheinen, um etwas herauszufinden
ich verstehe das,ich war in der gleichen situation (und vielleicht immer noch), gerade angefangen, extjs4 fw Monaten
InformationsquelleAutor Armance
----------- Nur für jemand, der dieses liest, Portal-Layout IST NICHT Teil des offiziellen Rahmens und ist ein 3rd-party-Erweiterung zusammen mit der Bibliothek, die ist, warum es nicht in den docs.
InformationsquelleAutor Dawesi