Using images in AW grid and other AW controls requires defining them first in CSS file. You have to choose a name for each image and declare a CSS class which links each name to the particular image file (or region inside the image file). The CSS class is composed of aw
prefix, image
in the middle and the name
at the end - .aw-image-name
. For example,
.aw-image-home {background: url(home.png)}
.aw-image-favorites {background: url(favorites.png)}
.aw-image-search {background: url(search.png)}
.aw-image-fontsize {background: url(fontsize.png)}
It is possible to put all images into one big file (easier for pre-loading) and use x-y offsets to address required part of the image -
.aw-image-home {background: url(icons.png) -40px 0px;}
.aw-image-favorites {background: url(icons.png) -80px 0px;}
.aw-image-search {background: url(icons.png) -120px 0px;}
.aw-image-fontsize {background: url(icons.png) -160px 0px;}
After the images are declared in CSS you can assign them to the cells with setCellImage()
method.
obj.setCellImage("favorites", 1, 1);
You also have to use the cell template which displays images - the default one, AW.Templates.Text, does not.
obj.setCellTemplate(new AW.Templates.ImageText, 1);
obj.setCellTemplate(new AW.Templates.Image, 2);