PDA

View Full Version : question: Vertical grid text



notjoshing
20 Oct 2010, 9:12 AM
I'm working on a grid in which the users would like to have vertical text in the cells of the grid, such as is shown here for a generic element: http://scottgale.com/blog/css-vertical-text/2010/03/01/ The headers should still show up with horizontal text.

Making the cells show up as vertical text is relatively straightforward: add a style to cells via a renderer.


.css-vertical-text {
filter : progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform : rotate(90deg);
-moz-transform : rotate(90deg);
-o-transform : rotate(90deg);
}




function vert(val,metadata,record,rowIndex,colIndex,ds) {
metadata.css += ' css-vertical-text';
return val;
}//end &vert
var tab = new Ext.grid.GridPanel({
columns : [
{header:'0',dataIndex:'col0',hidden:true,name:'col0',renderer:vert,width:25},
{header:'1',dataIndex:'col1',name:'col1',renderer:vert,width:25},
etc.
],
enableColumnMove: false,//don't let users re-order columns
enableHdMenu : false,//no menus in the header
sm : new Ext.grid.CellSelectionModel(),
stateful : false,
store : __getStore(),
title : title
});


However, there are two problems: 1) the rendered cells don't align with the cells in the grid, jumping around in position when the grid is resized; and 2) the column width--which I don't want users to change--leads to portions of the text being obscured, unless you set the width to something large.

I could try creating images on the fly and dropping these into the grid, but I think I may still have problems.

I'm using Ext 3.2.1 and developing for FF 3.6; IE 6; IE 8.

Any help would be appreciated.

Kind regards,

Josh