Main Region

Grid Row Action Icon Space
1 answer | 375 views

Jul 8, 2014 05:07 +00:00

Hello Matt,

I have used grid row action following the below link.

Is it possible to increase the space between the icons in the actions column, if so can you please suggest me how to do this.

Thanks in advance, SreeNithi.


Jul 8, 2014 07:42 +00:00

You have 2 options:

1: Add the following CSS to your application:

.x-action-col-icon {
    margin: 0 5px;

2: Change the icon CSS class (iconCls). You could use a different sprite map which has wider space than 16px which the current map uses

e.g. this is the current iconCls setup: "fx-icon cross"

"xtype": "foexactioncolumn",
"width": 80,
"items": [{
   "iconCls": "fx-icon cross",
   "action": "CANCEL",
   "tooltip": "Cancelled"

and this is the underlying CSS.

.fx-icon.cross {
    background-position: -504px -144px !important;
.fx-icon {
    background-color: transparent;
    background-image: url("./famfamfam.png") !important;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    height: 16px;
    vertical-align: baseline;
    width: 16px;

You must log in or sign up to post questions and answers.