EXT 5.1 new colorfield xtype

Hi all,

after an hour of investigation of how to use the nice new color field in Extjs 5.1 I thought to share my findings as I received first error messages in the console that some classes were missing.

This is how I proceeded to make the new colorfield work.

Step 1: as this field is not (yet) part of the base package of extjs 5.1 but it is provided in a seperate ux package, you need to adapt the requires section in your app.json file (which is empty by default) to the value:

Step 2: Run the sencha cmd:

sencha app build --clean development

Step 3: Add the requirement of the new field in your app.js file

Ext.require('Ext.ux.colorpick.Field');

Step 4: Add the colorfield in your form:

{

xtype : 'colorfield',

value : '#000000',

itemId : 'teamShirtColorId',

name : 'teamShirtColor',

fieldLabel : dictionary.FieldLabels['Teams']['colorShirt1.text'],

}

Note: for the fieldLabels I refer to a json dictionary file for implementing multilanguage fieldlabels.

I thought this might save some time for others...

EXT 5.1 new colorfield xtype