PDA

View Full Version : Portal Column styles



badgerd
26 Nov 2007, 10:30 PM
I have used the follow code to create an example portal.

What I would like to do is make the center column have a different style to the left and right side.

How could I achieve this? I have looked at using extraCls, but it doesn't seem to do the trick.


var viewport = new Ext.Viewport({
layout:'border',
border: false,
items:[{xtype:'portal',
region:'center',
border: false,
margins:'120 5 5 0',
items:[{
width:200,
style:'padding:10px',
items:[{
title: 'Item 1',
html: Ext.example.Item1
},{
title: 'Item 2',
html: Ext.example.Item2
}]
},{
columnWidth:1,
style:'padding:10px 10px 10px 10px',
items:[{
title: 'Search',
html: Ext.example.Search,
extraCls: 'whiteBG'
},{
title: 'News',
html: Ext.example.News,
extraCls: 'whiteBG'
}]
},{
width:220,
style:'padding:10px',
items:[{
title: 'Home Template',
html: Ext.example.HomeTemplate
}]
}]
}]
});

tryanDLS
27 Nov 2007, 10:51 AM
You'll have to look at the rendered HTML in firebug to see where that class is being added. You might also try the cls or ctCls configs. Also, you can use the Element.addClass fn to add a class to any element in the container structure.

badgerd
27 Nov 2007, 3:09 PM
I have looked at the rendered HTML and used cls instead of extraCls.

However, the class is being added to the incorrect div.

What I am trying to do is have the heading style/images in the middle column appear differently to the outside ones.

Also, Is there a way I can drag and drop only within the center column, and also allow the left and right columns to be drag/drop into each other?

badgerd
28 Nov 2007, 5:00 PM
bump :-/:s