cannot get uiview to render in viewport

[RonaldBrinkerink]

Hi there,

I have tried the following code:



Ext.onReady(function (){
// Als alles geladen is dan loading scherm verwijderen
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({
remove:true
});
},
350);
// Opbouw van het portaal
var oViewport = new Ext.Viewport({
layout: 'border',
id: 'viewport',
items:[{
xtype: 'tabpanel',
region:'center',
id: 'center-panel',
enableTabScroll: true,
shadow : true
},{
region : 'west',
id : 'west-panel',
collapsible : true,
titleCollapse : true,
split : true,
width : 250,
layout : 'accordion'
},{
region : 'south',
id : 'south-panel',
height : 20
}]
});
//================================================================================================================
// Na het laden van het portaal de inhoud opbouwen
//================================================================================================================
oViewport.on('show', function() {

// De widgets opbouwen
var oTakenView = new Ext.nd.UIView({
id: 'takenUIView',
viewTitle: 'Mijn taken',
viewUrl: '/' + sessionContext.workflowPath + '/Taken - Context',
showActionbar : true,
showSearch : true,
showPagingToolbar : true,
showSingleCategory : sessionContext.Session.commonUserName,
viewPort : this,
container : Ext.getCmp('west-panel'),
tabPanel : Ext.getCmp('center-panel'),
statusPanel : Ext.getCmp('south-panel')
})
}) // eo oViewport.on("show");
oViewport.show();

}) //eo onReady


The uiview gets created and if i manuallya add it to the west-panel using Ext.getCmp('west-panel').add(oTakenView) it does render. But then thje default behaviour of opening documents in the tabpanel doesn''t work. Thsi seemed to work with ExtJS 2.0. any ideas?

Regards, Ronald

[jratcliff]

try this



Ext.onReady(function (){

// Als alles geladen is dan loading scherm verwijderen
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 350);

// Opbouw van het portaal
var oViewport = new Ext.Viewport({
layout: 'border',
id: 'viewport',
items:[{
xtype: 'tabpanel',
region:'center',
id: 'center-panel',
enableTabScroll: true,
shadow : true
},{
region : 'west',
id : 'west-panel',
collapsible : true,
titleCollapse : true,
split : true,
width : 250,
layout : 'accordion',
items : [{
xtype : 'xnd-uiview',
id: 'takenUIView',
target : 'center-panel',
viewTitle: 'Mijn taken',
viewUrl: '/' + sessionContext.workflowPath + '/Taken - Context',
showActionbar : true,
showSearch : true,
showPagingToolbar : true,
showSingleCategory : sessionContext.Session.commonUserName
}]
},{
region : 'south',
id : 'south-panel',
height : 20
}]
});


}) //eo onReady




I added 'target' to your UIView config and what it does is it tells the view where to open documents. So if you specify the id of an Ext component, then the docs will open there.


target : 'center-panel',


And removed these lines since Ext.nd doesn't use them (if you use them then add them back)


viewPort : this,
container : Ext.getCmp('west-panel'),
tabPanel : Ext.getCmp('center-panel'),
statusPanel : Ext.getCmp('south-panel')



Also, just curious, but why do you have the west panel setup to use an accordion layout but only include just one item, the uiview?

Let me know if this works for you,
Jack

[RonaldBrinkerink]

Hi Jack,

Thank you for your swift response.
This does work but I have two questions:

1. You moved the creation of the uiview to within the viewport definition. Does this mean it is the only way to include the uiview panel in the viewport instead of dynamically adding them?
2. The viewport, targetPanel, statusPanel and container config parameters were in use in the previous version of extnd. Are they now removed?

Regards, Ronald