PDA

View Full Version : [CLOSED] How to set css property of a grid column header at runtime



feanor91
Jan 07, 2013, 1:53 PM
Hello

My application could be use on several screen type including big screen in a workshop. On this screen I have to compute the dimension of the grid that show data to fulfill the screen so people could read information far from the screen.

i manage to draw data corectly and show ine good size from a laptop screen to my big scree, but now, I have to deal with the header column.

I use the custom grid show in you example. I have this CSS property :


.x-grid-custom .x-column-header {
background : #718CA1 url(images/Grid/header_sprite.png) repeat scroll 0 bottom;
font : 12px/16px "segoe ui",arial,sans-serif;
height : 22px;
border-left-color : #6085A5;
border-right-color : #728BA1;
}


I could write another like that :


.x-grid-custom .x-column-header-large {
background : #718CA1 url(images/Grid/header_sprite.png) repeat scroll 0 bottom;
font : 24px/26px "segoe ui",arial,sans-serif;
height : 22px;
border-left-color : #6085A5;
border-right-color : #728BA1;
}


But how to set up either in Javascript code or code behind code?

For the grid data I use a renderer but what for grid definition itself?

feanor91
Jan 07, 2013, 2:24 PM
Found.

I have duplicate all x-grid-custom CSS prpoerty, call them x-grid-custom-large, change parameteres wanted and use grid.Cls property in code behind.

Daniil
Jan 07, 2013, 2:27 PM
Hi @feanor91,

I think you found a correct way. This technique is demonstrated in this example.
http://examples2.ext.net/#/GridPanel/Miscellaneous/Custom_UI/