PDA

View Full Version : Help- Add portals placed in border layout inside tab



Roshani
8 Jun 2009, 3:41 AM
Please help me:((....I am adding tabs into viewport and able to see tabs.
I want to show portals which are placed in border layout into one of the tab.
I am doing but nothing is displayed into tab..please look the below code and plz let me know where I am wrong......

//its portals inside border layout
var contentPanel = {
layout: 'border',
items: [

{
xtype: 'portal',
region: 'center',
margins: '35 5 5 0',

items: [{
columnWidth: .99,
style: 'padding:0px 0 0px 0px',
items: [{
title: 'Profile Pic11',

html: '<div id="mainarea3"></div>'


}, {
title: 'Featured Stock3',

html: '<div id="mainarea1"></div>'
}]
}, {
columnWidth: .99,
style: 'padding:0px 0 0px 0px',
items: [{
title: 'Stock Exhange Information11',



html: '<div id="mainarea2"></div>'
}]
},

{
columnWidth: .99,
style: 'padding:0px 0 0px 0px',
items: [{
title: 'LatsetNews',



html: '<div id="mainarea4"></div>'
}]
}, {
columnWidth: .99,
style: 'padding:0px 0 0px 0px',
items: [{
title: 'Africa Market Roundup',


html: '<div id="mainarea5"></div>'
}, {
title: 'Top Stock',


html: '<div id="mainarea6"></div>'
}]
}]
}]

};

//its tab panel containing portals - above code
var tabsNestedLayouts = {
xtype: 'tabpanel',
id: 'tabsnestedpanel',
title: 'TabPanel with Nested Layouts',
activeTab: 0,
region: 'center',
items:[{
title: 'Foo',
items: [contentPanel]


},{
title: 'Bar',
bodyStyle: 'padding:10px;',
html: 'Nothing to see here.'

}]
};

//this is viewport containing tab panel

new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [{
layout: 'border',
// id: 'layout-browser',
region:'center',
border: false,

items: [tabsNestedLayouts]
},

],

});

tryanDLS
8 Jun 2009, 8:00 AM
http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly

koko2589
8 Jun 2009, 9:02 AM
here



frame:true, region:'center',
bodyStyle:'background:#f1f1f1', margins: '10 10 10 10'
,
cmargins: '10 10 10 10',
iconCls: 'tabs',
shim:false,
animCollapse:false,

constrainHeader:true,
layout: 'fit', items:
new Ext.TabPanel({
activeTab:0, border:false,enableTabScroll: true,id: 'Tabs',
items: [{
title: 'my portal', xtype:'portal', margins: '0 0 10 10',
cmargins: '10 10 10 10' ,
region:'center',




items: [{
columnWidth:.49,
style:'padding:10px 10 10px 10px',
items: [{

frame:true, iconCls: 'star1', title: 'Panel 1', // html: Ext.get('news2').dom.innerHTML,

tools: tools
}, {
title: 'Panel 2',
tools: tools,
frame:true,
html: 'This is panel 666666666323232'
}, {
title: 'Panel 3',
tools: tools,
html: 'This is panel 3'
}, {
title: 'Panel 44444444444444',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{





columnWidth:.49,
style: 'padding:10px 5px 10px 10px',

items: [{
title: 'Panel 48888888888', //html: Ext.get('sport2').dom.innerHTML,
tools: tools
}, {
title: '1222',html: Ext.example.shortBogusMarkup,
tools: tools
}, {
title: 'Panel 4',
tools: tools,
html: Ext.example.shortBogusMarkup
}]


}] ,

border:false, autoScroll:true, iconCls:'Address-Book-16x16',id:'menu',
header:false,bodyStyle:'background:#ffffff',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'read me !',
header:false,closable: true,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})









}]

Roshani
8 Jun 2009, 9:50 PM
Thanks for the help...It works now.....