PDA

View Full Version : filter list with icons



gezb
21 May 2014, 1:19 PM
I've created a FiltersFeature on a grid and 1 column has a list filter. All is working fine but I want to add an icon to each value in the list. For example, if the list contains the name of countries, I would like the countries flag before the name. I have searched within the js source files and documentation but can't find how this could be achieved. Any help or examples would be appreciated. Thanks in advance.

scottmartin
24 May 2014, 8:06 AM
Here is a good article on adding colors / images to grids:
http://skirtlesden.com/articles/styling-extjs-grid-cells

If you want the icon to perform an action, have a look at actionColumn.

gezb
26 May 2014, 11:53 PM
Thanks for your reply. I am trying to add icons to the drop down list menu filter, not within the grid. I am a step closer now. I have modified the Json data for the labelField to include a span tag as below :-
<span class='gb-flag'>United Kingdom</span>. I now get the flag icon and country name but the country name is on top of the flag icon, I need them to be next to each other. My css class needs to be changed. Icons are 16px by 16px.


.gb-flag { background-image: url('../icons/gb-flag.png') !important;
background-repeat: no-repeat;
}



Sorted now.
Create the Json data file for the list as below


"data":[{"flag_id": "gb-flag","flag_text": "<span class=gb-flag></span>United Kingdom"}]

Create the css file as below


.gb-flag {
content: url('../icons/gb-flag.png') !important;
}

Create the filter as below


filter: {
type: 'list',
store: 'flags',
idField: 'flag_id',
labelField: 'flag_text'
},