Main Region

Grid Row Action Icon Space
1 answer | 375 views

SR
Jul 8, 2014 05:07 +00:00

Hello Matt,

I have used grid row action following the below link.

http://blog.tryfoexnow.com/grid-row-actions/

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.

0 comments

MN
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;
}
0 comments

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