PDA

View Full Version : table layout on Panel



pirusira
27 Apr 2010, 1:10 AM
Hello.

Here's my source.



c1={ width: 100,
html: 'col1' }
c2={ html: 'col2' }
c3={ html: 'col3' }
c4={ html: 'col4' }
c5={ html: 'col5' }
c6={ html: 'col6' }
c7={ html: 'col7' }
c8={ html: 'col8' }


var loginForm = new Ext.Panel({
height: 90,
bodyStyle: 'background-color:dfe8f6',
layout: 'table',
border: false,
layoutConfig: {
columns: 4
},
items: [
c1,c2,c3,c4,c5,c6,c7,c8
]
});

WestArea = function(viewport){
this.viewport = viewport;
WestArea.superclass.constructor.call(this,{
region: 'west',
split: true,
collapsible: true,
title: 'Login',
width: 260,
minSize: 200,
items: [
loginForm
]
})
};

Ext.extend(WestArea, Ext.Panel,{ });
I wanted to change my column width by percentage manner.
So I changed the attribute of column like this,

columnWidth: .5

but it didn't work.

And I wanted to change background color of columns, so I added an attribute of column like this,

style: 'background-color:red;' and
css: 'background-color:red;'

but it didn't work too.

Let me know how to change the two attributes.

Thanks!
Stan