Sunday, 14 August 2016

Extjs - How to change style of item in combox

I would like to post the change the color of item in combox.

Recently i worked on changing the color of combobox item based on current year Quarter. This we can do using XTemplate. XTemplate we can do based on conditional operations, math operations we can do.

We need to create style Class for this.

div .comboColor {
    padding-left: 4px;

And ComboBox definition like below.

  xtype: 'combobox',
  labelWidth: 70,
  store: AccountingPeriods,
  displayField: 'Description',
  valueField: 'AccountingPeriodId',
  name: 'Period',
  queryMode: 'local',
  fieldLabel: 'Year Periods',
  tpl: Ext.create('Ext.XTemplate',
  '<tpl for=".">',
  '<div class="{[this.getClass(values)]}">{Description}</div>',
        getClass: function (rec) {
              return rec.IsCurrent ? 'x-boundlist-item comboColor' : 'x-boundlist-item';


The OutPut result will be.

No comments:

Post a Comment