Results 1 to 3 of 3

Thread: change the style of Combobox elements

  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Location
    Ottawa, Ontario, Canada
    Posts
    123
    Answers
    4

    Default Answered: change the style of Combobox elements

    Hi

    Is it possible to change the style (like background) on combobox elements when list is shown based on some values from store record?

    For example, I have a store for combobox tha has a model where field {name: 'recommended', type: 'boolean} exists. I would like to highlight those records in the dropdown list where recommended = true.

  2. Sure. You can do something like this:

    Code:
    Ext.create('Ext.form.field.ComboBox', {
        ...
        listConfig: {
            getInnerTpl: function(displayField) {
                return '<div class="{recommended}">{' + displayField + '}</div>';
            }
        }
    });
    It's a snippet of XTemplate, so you can build in whatever conditional logic you need.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Sure. You can do something like this:

    Code:
    Ext.create('Ext.form.field.ComboBox', {
        ...
        listConfig: {
            getInnerTpl: function(displayField) {
                return '<div class="{recommended}">{' + displayField + '}</div>';
            }
        }
    });
    It's a snippet of XTemplate, so you can build in whatever conditional logic you need.

  4. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    10

    Default

    getInnerTpl is not present in the documentation; you can find it only in the examples (and the source code, of course), and seems much more like an internal feature.

    Is there a documented way to get the same result?
    That is, if I set
    Code:
    ...
    listConfig: {
      getInnerTpl: function() {
        return '<div>{columnA} ({columnB})</div>';
      }
    }, 
    ...
    it works; I've tried to set tpl config option to something like

    Code:
    ...
    tpl: '<tpl for="."><div>{colunmA} ({columnB})<div></tpl>', 
    ...
    but in this case I cannot select items any longer (ie cannot click on list items).

Posting Permissions

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