1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    24
    Vote Rating
    0
    999Dom999 is on a distinguished road

      0  

    Default Answered: Combobox change color of selected item

    Answered: Combobox change color of selected item


    The code below changes the color in the selection dropdown list. I want to change the color that is displayed inside the combobox. The desired result is shown in the image below. Thanks for help on this.

    running.JPG
    Code:
    var running = Ext.create('Ext.data.Store', {
     fields: ['code', 'display','color'],
     data : [
      {'code':'Yes', 'display':'Running','color':'green'},
      {'code':'No', 'display':'Not Running','color':'orange'},
      {'code':'Disc', 'display':'Discontinued','color':'red'}
     ]
    });
    
    
    xtype     : 'combo',
    name      : 'runLine',
    store: running,
    labelAlign: 'left',
    fieldLabel: 'Running Line',
    displayField: 'display',
    valueField: 'code',
    forceSelection: true,
    tpl: '<tpl for="."><div style="color:{color};">{display}</div></tpl>'

  2. There're several different ways to do this. The probably simplest way is to add a change event listener on the combo and use inputEl.addCls() as below.

    First, let's assume we have the cls info from the combo data store.

    Code:
    fields: ['code', 'display', 'cls'],
    Then -
    Code:
    combo.on('change', changeHandler, scope);
    Then -
    Code:
    changeHandler: function(combo, nVal, oVal) {
        var oRec = combo.findRecordByValue(oVal), nRec = combo.findRecordByValue(nVal);
        oRec && combo.inputEl.removeCls(oRec.get('cls'));
        nRec && combo.inputEl.addCls(nRec.get('cls'));
    And finally - in your css, add appropriate styles for such cls.

    Cheers,

  3. #2
    Ext JS Premium Member
    Join Date
    Mar 2008
    Posts
    7
    Vote Rating
    1
    Answers
    4
    kaiden.vo is on a distinguished road

      1  

    Default


    There're several different ways to do this. The probably simplest way is to add a change event listener on the combo and use inputEl.addCls() as below.

    First, let's assume we have the cls info from the combo data store.

    Code:
    fields: ['code', 'display', 'cls'],
    Then -
    Code:
    combo.on('change', changeHandler, scope);
    Then -
    Code:
    changeHandler: function(combo, nVal, oVal) {
        var oRec = combo.findRecordByValue(oVal), nRec = combo.findRecordByValue(nVal);
        oRec && combo.inputEl.removeCls(oRec.get('cls'));
        nRec && combo.inputEl.addCls(nRec.get('cls'));
    And finally - in your css, add appropriate styles for such cls.

    Cheers,

Thread Participants: 1

Tags for this Thread