PDA

View Full Version : Dynamically changing portal content (border layout)



kovomaster
7 Aug 2009, 3:21 AM
Hi guys, I have a serious problem. :-?
I have a Viewport with border layout. My goal is to change center dynamically after invoking some method:


Ext.onReady(function(){


tp = new Ext.Container({
id:'center_changes',
region:'center',
layout:'border',
style:'border:3px solid yellow;',
items:{
region:'center' //here I ll try put something using extXMLRun() method, but it doesnt fit the area...only grab necessary space, but I want it to take all the space available. doLayout() method dont effect
}
});

vport= new Ext.Viewport({
layout:'border',
forceLayout:true,
items:[
tp
,
{ //this north branch is not important
region:'north',
height:100,
layout:'border',
items:
[
new Ext.BoxComponent({
region:'west',
autoEl: {
tag: 'img',
src: '/images/posam_portal/$file/portal_logo.png'
}
}),
{
region:'center',
html:'<br/><br/><div align="center">Vitaj, '+ userName.CANONICALIZE+'</div><br/><br/><img src="/images/posam_portal/$file/portal_logo.png" height="20" width="30" style="border-right:none;border-bottom:none;border-left:none;border-top:none;padding-left:300px;" onClick="extXMLRun();"></img>'

},
new Ext.BoxComponent({
region:'east',
autoEl:
{
tag: 'img',
src: '/<%webdbname%>/images/posam_portal/$file/eKurier.png'
}
})
]
} , //end of non-important north branch, only noticable thing is extXMLRun() method
{ //this is not important at all
region:'south',
html:'Copyright PosAm, 2009, v.20/07/2009',
height:50
}]
})
});


and now I am about to show you my extXMLRun() method which is called after click above and I want to replace renter element by my new one:


function extXMLRun(){

Ext.Ajax.request({ //now I am construing new center from json file
url: 'konfig.json',
disableCaching:false,
success: function ( result, request ) {
var jsonData = Ext.decode(result.responseText); //getting objects from json
//here could be function that removes children, just like tp.items.first().removeAll();
tp.items.first().add(jsonData); //adding content

tp.items.first().doLayout(); //nothing from mentioned makes effect, nor this
tp.items.first().expand(); //again nothing
// vport.doLayout(); //nothing
},
failure: function ( result, request ) {
Ext.MessageBox.alert('Failure', 'Getting of xml file failed. Data return from the server: '+ result.responseText);
},

});

};

and for those who wants to see a new center json data: (content of konfig.json):


{
region:'center', //I want this file to fit to center area determined by border layout above... this will not fit even when I removed previous center element
xtype:'tabpanel',
activeItem:0,
autoBoxAdjust:false,
autoHeight:true,
items:[
{
title:'Prvá záložka',
layout:'fit',
items:[
{
xtype:'portal',
region:'center',

margins:'100 5 5 0',
items:[

{
columnWidth:.15,
items:[{region:'west',
id:'west-panel',
title:'PosAm navigator',
split:true,
width: 150,
minSize: 125,
maxSize: 400,
collapsible: true,
margins:'100 0 5 5',
cmargins:'35 5 5 5',
layout:'anchor',
defaults:{
collapsible: true,
collapsed: true,
titleCollapse: true
},
layoutConfig:{
animate:true,
},
items: [{
title:'?ierna skrinka',
html: '<div><b>Vaše námety, postrehy, s?ažnosti :</b></div><div>(zaznamenávané anonymne)</div><form name="Suggestion" method="post" action="/json.writer?openagent&database=customers\\posam\\portal\\portaltest.nsf&ok" id="frm-ciernaskrinka" onSubmit="return false"><textarea name="Suggestion"></textarea><input type="hidden" name="Form" value="Suggestion"></input><input type="hidden" name="HeaderSource" value="Námet"></input><button type="submit" dojoType="dijit.form.Button" id="ok-button-ciernaskrinka">Zaevidova?</button></form>',
border:false,
autoScroll:true,
collapsed:false
//iconCls:'settings'
},{
title:'Inzercia',
html: 'Nejaké inzeráty sem šuchnem stadeto',
border:false,
autoScroll:true,
},{
title:'Diskusia',
html: 'diskusia..',
border:false,
autoScroll:true,
}]
}]
},
{
columnWidth:.35,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
layout:'fit',
items: new SampleGrid([0, 2, 3])
}]
},{
columnWidth:.25,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Eurokalkula?ka',
items: {xtype:'eurocalc'}
},{
title: 'RSS Grid Panel',
items: new FeedGrid()
}]
},{
columnWidth:.25,
style:'padding:10px 0 10px 10px',
items:[{
title: 'RSS Tree Panel',
items: xmlgrid
},{
title: 'Anketa',
html: 'anketa'
}]

}]
}]
},
{
title:'Druhá záložka',
layout:'fit',
html:'Michal'
},
{
title:'Tretia záložka',
layout:'fit',
html:'Feri'
}
]
}


All highlighted words are keys for understanding what I am talking about. I would appreciate your help, because I spent a lot of time trying and I really dont know how to solve this problem. Everything works fine except of that thing, that new content (added from konfig.json) doesnt fit into that area which was possessed by center element which is generated on first run and fits properly because of its border layout parent and his center attribute.