PDA

View Full Version : establishment of icons depending on the value in actioncolumn



Rulila
16 Apr 2012, 2:32 AM
Sorry for my english :) I want to create a condition of type:

xtype:"actioncolumn",
width:50,
items: {if (value in Cell=='true')
{return 'picture1.gif'}
else{return 'picture2.gif'}
}

How to get value in cell?
Ie, I want depending on the value in the cell, set it to the appropriate icon (if true->picture1 if false>picture2)

scottmartin
16 Apr 2012, 8:43 AM
have a look at getClass:



{
xtype: 'actioncolumn',
header: '(in table)',
width: 55,
items: [
{
getClass: function(v, meta, rec) { // Or return a class from a function
if (rec.get('field_value') === true) {
return 'in-table';
}
},
handler: function(grid, rowIndex, colIndex) {
}
}]
}


Regards,
Scott

Rulila
16 Apr 2012, 9:07 AM
I`m sorry, Never worked with css.
<style type="text/css">
in-table{icon: url(my_URL.jpg)}
<style>
It`s not worked.. Please, Tell me how, in this case to work with the class of extjs, or give an example css to change the icons..

scottmartin
16 Apr 2012, 9:52 AM
create a CSS file and include it in your html. In the CSS file:

set the condition as show in the getClass



.x-action-col-cell img.in-table {
background-image: url(table.png);
}

.x-action-col-cell img.out-table {
background-image: url(table.png);
}


See this online example:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/array-grid.html

Scott.

lord_mixtli
27 Feb 2013, 7:22 AM
Hi

I just saw the solution here and I applied but it didnt work, after checking the official documentation I found the error.

The user "cbaj26" in the official documentation under the comments:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action
wrote:

.x-action-col-cell img {
height: 16px;
width: 16px;
}

That means that if you use the "icon" directly you dont need to write the height and width properties but if you use the "iconCls" property you must additionally write the following two lines:

height: 16px;
width: 16px;

Here is the complete css snippet:

.x-action-col-cell img.edit-user{
height: 16px;
width: 16px;
background-image: url('image.png');
}

Good luck ;)