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
    Answers
    4
    Vote Rating
    1
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi