PDA

View Full Version : How to change row height of the GridPanel?



kostepanych
22 Jul 2010, 4:03 AM
I have images, that doesn't fit the cell height and displayed truncated.
So how to change row height of the GridPanel?

Condor
22 Jul 2010, 4:18 AM
Use a css rule:

.x-grid3-col-<id-of-column-with-image> {overflow: visible;}

Animal
22 Jul 2010, 4:31 AM
It's weirder than that.

If the OP has a large image IN the cell, the cell will stretch to accommodate it.

Could he be using a background-image?

Which would mean explicit height setting for the row div in that grid.

kostepanych
22 Jul 2010, 4:47 AM
.x-grid3-col-<id-of-column-with-image> {overflow: visible;}It doesn't help...

To display images in cell I use renderer:

function pctStop(val){
return '<span class="stop-cell">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>';
}and css class:

.stop-cell {
background-image: url(/images/button-stop.png) !important;
background-repeat: no-repeat;
padding-left: 16px;
cursor: pointer;
}May be there is better way?

Animal
22 Jul 2010, 4:59 AM
So obviously, you need to explicitly size the cell.

incidentally, in the current generation of browsers you should use an image as an inline-block vehicle for showing a background image.

kostepanych
22 Jul 2010, 5:18 AM
Didn't understand anything...

Should I use IMG html tag in renderer instead of background-image?

Condor
22 Jul 2010, 5:23 AM
No.

Instead, change the css rule to:

.stop-cell {
background-image: url(/images/button-stop.png) !important;
background-repeat: no-repeat;
padding-left: 16px;
cursor: pointer;
display: block,
width: 20px;
height: 20px;
}
(enter correct height and width of image)

Animal
22 Jul 2010, 5:30 AM
Doesn't need the padding-left if you are converting it to a sized block element (converting a span into a div)

kostepanych
22 Jul 2010, 7:38 AM
Thanks, but I more like to use as renderer:

function pctStop(val)
{
return '<img src="/images/button-pause.png">';
}
I guess it's more simple because needn't any css styles (maybe only "cursor: pointer");

Animal
22 Jul 2010, 7:44 AM
That's probably easier.

Is that to be clickable to execute some code?

If so, be sure to upgrade to 3.3 when it is released soon. It will have a new column xtype: 'actioncolumn' which allows you to configure an icon URL, and a handler function.

Nightwish
22 Jul 2010, 9:58 AM
Awesome - "actioncolumn" would be a welcome addition! Is there a release date set for 3.3?

Animal
22 Jul 2010, 10:24 AM
I'm not at liberty to say! ;)

Soon though! You can plan to use it!