Results 1 to 3 of 3

Thread: filter list with icons

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    11
    Answers
    2

    Default Answered: filter list with icons

    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.

  2. 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.
    Code:
    .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
    Code:
    "data":[{"flag_id": "gb-flag","flag_text": "<span class=gb-flag></span>United Kingdom"}]
    Create the css file as below
    Code:
    .gb-flag {
        content:                url('../icons/gb-flag.png') !important;
    }
    Create the filter as below
    Code:
    filter: {
                        type:       'list',
                        store:       'flags',
                        idField:    'flag_id',
                        labelField: 'flag_text'
                    },

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Here is a good article on adding colors / images to grids:
    http://skirtlesden.com/articles/styl...tjs-grid-cells

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

  4. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    11
    Answers
    2

    Default

    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.
    Code:
    .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
    Code:
    "data":[{"flag_id": "gb-flag","flag_text": "<span class=gb-flag></span>United Kingdom"}]
    Create the css file as below
    Code:
    .gb-flag {
        content:                url('../icons/gb-flag.png') !important;
    }
    Create the filter as below
    Code:
    filter: {
                        type:       'list',
                        store:       'flags',
                        idField:    'flag_id',
                        labelField: 'flag_text'
                    },

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •