I have some icons stored in database (i don't want the client to lose his icons, that's why i don't store them on disk - and some 5KB png's are not a big deal) which I need to be displayed in a grid, from where a user can either delete one ore upload some others. I managed to display the icons in the grid by converting the binary image into its Base64 representation (on the server) like this: (part of my JsonHelper, which returns the ExtJs grid store Json from a DataTable)
if (dt.Columns[j].DataType == Type.GetType("System.Byte[]"))
{
byte[] byteArray = (Byte[])rows[i][j];
//tempStr is the Json string i am building
tempStr = tempStr.Replace(dt.Columns[j].ToString().ToLower(),
Convert.ToBase64String(byteArray, 0, byteArray.Length));
}
Then, on client side, in the grid I render the column icon like this:
renderIcon: function (value)
{
return '<img src="data:image/jpeg;base64,' + value + '" style = "margin-left: 5px; height: 24px; width: 24px;"/>';
}
Everything works fine, but it seems to me it is not an elegant way (for example, if i want to select an icon from the grid and put it in a container, i have to add a label in that container with a html that 'points' to the image, since I don't have an actual image to work with an img xtype)
Can this be done in an more elegant/proper way ? I am using ExtJs 4.0.7, SQL server 2008 with asp.net.