How to add clear trigger to textfield

Hello all,

Today i would like to post the basic textfield enhancements in extjs. How to add the Clear trigger icon to textfield.

Below is the code to add triggers to textfield, we can multiple triggers like clear, search icon aswell.

                  {

                        xtype: 'textfield',

                        fieldLabel: 'Search',

                        triggers: {

                            clear: {

                                cls: 'x-form-clear-trigger',

                                handler:function(field) { field.reset(); }

                            }

                        }

                    }

OutPut

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 {

    background-color: #87CEFA;

    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>',

  '</tpl>',

    {

        getClass: function (rec) {

              return rec.IsCurrent ? 'x-boundlist-item comboColor' : 'x-boundlist-item';

                               }

    }

  )}

The OutPut result will be.

Hyderabad dotnetConf 2016

Hyderabad dotnetConf 2016 Welcomes You!

Microsoft User Group Hyderabad presents Hyderabad dotnetConf 2016. Immerse yourself 

in the world of .NET.

Hyderabad dotnetConf 2016 featuring speakers from the Microsoft Most Valuable

Professionals, .NET Community and Microsoft. Mark your calendar on August 27th.

Learn to develop for web, mobile, desktop, games, services, libraries and more for a variety

of platforms and devices all with .NET! We'll have presentations on .NET Core 

and ASP.NET Core, C#, F#, Roslyn, Visual Studio, Universal Windows Platform (UWP),

 Xamarin, and much more.

Venue:

Microsoft India Development Center

Building 3, Gachibowli, Hyderabad, Telangana 500032, India

Register

For more details and Agenda MUGH