PDA

View Full Version : Personalized grid



same66
28 Dec 2010, 2:20 AM
Hi,

I'm creating a grid, and i want a similar skin that on my screen :

http://img695.imageshack.us/i/graph2b.jpg/

1. Is it possible to give a height in a line ?

2. Is it possible to write in each column vertically ?

Thanks :)

Condor
28 Dec 2010, 2:27 AM
1. Yes, using css. If you want different row heights for each row, write a getRowClass method.

2. Yes, but only in some browsers. If you need to support all browsers (including Opera) then you will need to use images of vertical text.

same66
28 Dec 2010, 2:31 AM
1. Very nice, I go to try that !

2. Ok, it's perfect, I want only IE8 and FF3.6
Hum just, if you have a exemple for me... :)

Thanks :)

Condor
28 Dec 2010, 4:14 AM
Don't have an example at hand, but you need to apply the writing-mode css option (e.g. writing-mode:tb-rl).

same66
28 Dec 2010, 5:28 AM
Hi,

I use metaData.attr = 'style="writing-mode : tb-rl;"'; but no effect for my grid

Is it the good usage to do that ?

thanks :)

Condor
28 Dec 2010, 5:49 AM
You can't set the style using 'attr'. metaData has a separate 'style' option for that.

But you shouldn't be setting styles anyway. You should be using a css class in metaData.css.

same66
28 Dec 2010, 5:56 AM
Hum, it's ok, but writing-mode works only with IE :(, and I want the same effect for firefox3.6.

Condor
28 Dec 2010, 6:08 AM
Firefox (v3.5+), Opera (v10.50+), Safari/Chrome:

-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);

same66
3 Jan 2011, 1:22 AM
Hi,

thanks for you help, my grid works correctly but, I have a problem with the height of the row in my grid (only with FF).

http://img832.imageshack.us/i/iegrid.jpg/ (IE it's perfect).

http://img440.imageshack.us/i/gridff.jpg/ (FF problem with the height of the row...)

Do you have an idea to resolv this problem ?

Thanks and good year :)

Condor
3 Jan 2011, 2:20 AM
You'll need to specify a fixed height for the row (unfortunately, -*-transform: rotate doesn't automatically adjust the element height).

same66
3 Jan 2011, 6:43 AM
Okay, I go to try that, but... how to specify the height for the row please ? :/
Thanks :)

Condor
3 Jan 2011, 7:52 AM
Can all rows be the same height (#1) or do you need to apply this height only to a single row (#2)?

1. Give your grid a cls: 'grid-with-large-rows' and make a css rule:

.grid-with-large-rows .x-grid3-body .x-grid3-cell-inner {
height: 100px;
}

2. Write a getRowClass method that returns 'large-row' for that particular row and make a css rule:

.large-row .x-grid3-cell-inner {
height: 100px;
}

same66
3 Jan 2011, 8:11 AM
Thanks it's perfect.
I want just one row with height 100px.
I try now :)