How to rotate a grid column header?

[AmitM]

I'm new to EXT and I was trying the rotate a column header by 90 degrees. Nothing. I simplified and was trying to make it bold (for testing) by setting the CSS property and still did not get any results.

Is there another way to do this?

    .headerText
    {
    	font-weight: bold;
    	font-size:large;
    }

                <ext:Column ColumnID="indAcademic" Header="Academic Indicator" Width="48" DataIndex="AcademicInd" Css="headerText" >
                    <Renderer Fn="IndicatorCol" />
                </ext:Column>

Thanks,
Amit

[Daniil]

Hi,

Column's css is not applied to header cell.
http://dev.sencha.com/deploy/ext-3.3...umn&member=css

You can use html tags in .Header:
http://dev.sencha.com/deploy/ext-3.3...&member=header

[AmitM]

Great...I used HTML and I have the grid column header rotated (using the following style):

    .headerText
    {
    	display:block;
    	height:128px;
    	width:128px;
    	vertical-align:bottom;
		-webkit-transform: rotate(-90deg);     
		-moz-transform: rotate(-90deg);     
		-o-transform: rotate(-90deg);     
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  
	}
	
	.headerBottom
    {
    	vertical-align:bottom;
	}

The column is defined as:

                <ext:Column ColumnID="indAcademic" Header="<span class='headerText'>Academic Indicator</span>" Width="48" DataIndex="AcademicInd">
                    <Renderer Fn="IndicatorCol" />
                </ext:Column>

That works great EXCEPT, I need the columns that are not rotated to be aligned to the bottom of the header, and they align to the middle. I tried applying the headerBottom class but it had no effect.

Any ideas?

[Daniil]

Please use:

.x-grid3-hd-Column1 {
    margin-top: 100%;
    text-align: center;
}

<ext:Column ColumnID="Column1" Header="Test" DataIndex="test" />

[AmitM]

no joy...still aligned in the middle. Attached SS has the two columns side by side.




Thanks,
Amit

[Daniil]

Please show the css class and the column's definition.

[AmitM]

<style type="text/css">
    .icon-combo-item {
        background-repeat: no-repeat ! important;
        background-position: 3px 50% ! important;
        padding-left: 24px ! important;
    }
    
    .headerText
    {
    	display:block;
    	height:128px;
    	width:128px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align: left;
		-webkit-transform: rotate(-90deg);     
		-moz-transform: rotate(-90deg);     
		-o-transform: rotate(-90deg);     
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
	}
	
	.headerBottom
    {
    	height:128px;
        margin-top:auto;     
        vertical-align:bottom;
    	text-align: center;
	}
	
    .x-grid3-hd-Column1  
    {
    	margin-top: 100%;     
    	text-align: center; 
    }  
</style>

                <ext:Column DataIndex="FRL" Header="FRL" Width="50">
                    <Renderer Fn="YesNoCol" />
                </ext:Column>
                <ext:Column ColumnID="indAcademic" Header="<span class='headerText'>Academic Indicator</span>" Width="48" DataIndex="AcademicInd">
                    <Renderer Fn="IndicatorCol" />
                </ext:Column>

[Daniil]

.x-grid3-hd-Column1

'Column1' must be ColumnID.

So, replace with

.x-grid3-hd-indAcademic

[AmitM]

Thanks...I made the adjustment to FRL and indAcademic. I need to add the rotate CSS to academic. This is what I have now:

<style type="text/css">
    .x-grid3-hd-FRL 
    {
    	background-color:Green;
    	margin-top: 100%;     
    	text-align: center; 
    }    
    
    .x-grid3-hd-indAcademic
    {
    	margin-top: 100%;
    	text-align: center;
		-webkit-transform: rotate(-90deg);     
		-moz-transform: rotate(-90deg);     
		-o-transform: rotate(-90deg);     
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    } 
</style>

                <ext:Column ColumnID="FRL" DataIndex="FRL" Header="FRL" Width="50">
                    <Renderer Fn="YesNoCol" />
                </ext:Column>
                <ext:Column ColumnID="indAcademic" Header="Academic Indicator" Width="48" DataIndex="AcademicInd">
                    <Renderer Fn="IndicatorCol" />
                </ext:Column>

This is what it looks like:


All I need at this point is for the labels to line up along the bottom.

Thanks,
Amit

[AmitM]

<style type="text/css">
    .icon-combo-item {
        background-repeat: no-repeat ! important;
        background-position: 3px 50% ! important;
        padding-left: 24px ! important;
    }
    
    .headerText
    {
    	display:block;
    	height:128px;
    	width:128px;
    	margin-left:auto;
    	margin-right:auto;
    	text-align: left;
		-webkit-transform: rotate(-90deg);     
		-moz-transform: rotate(-90deg);     
		-o-transform: rotate(-90deg);     
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
	}

    .x-grid3-hd-fullName, .x-grid3-hd-AYP, .x-grid3-hd-Race, .x-grid3-hd-ELL, .x-grid3-hd-SWD, .x-grid3-hd-FRL, .x-grid3-hd-ReadBAT1, .x-grid3-hd-ReadBAT2, .x-grid3-hd-MathBAT1, .x-grid3-hd-MathBAT2
    {
    	margin-top:120px;
    	text-align: center; 
    }    
</style>

                <ext:Column ColumnID="FRL" DataIndex="FRL" Header="FRL" Width="50" Hideable="false">
                    <Renderer Fn="YesNoCol" />
                </ext:Column>
                <ext:Column ColumnID="indAcademic" Header="<span class='headerText'>Academic Indicator</span>" Width="48" DataIndex="AcademicInd" Hideable="false">
                    <Renderer Fn="IndicatorCol" />
                </ext:Column>

Thanks for all the suggestions.

-Amit