how to add emojis panel to Extjs project

any idea how to integrate jQuery.emojiarea with Extjs sencha, or if there is any other library to add emojis to my extjs project

Something like this:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.form.FormPanel', {
            title: 'Sample TextArea',
            width: 400,
            bodyPadding: 10,
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: "Show Form Values",
                    handler: function () {
                        var formPanel = this.up('form');
                        console.log(formPanel.getValues());
                    }
                }]
            }],
            items: [{
                xtype: 'textareafield',
                grow: true,
                name: 'message',
                fieldLabel: 'Message',
                labelAlign: 'top',
                anchor: '100%',
                value: "lorem ipsum dolor sit amet :smile:",
                listeners: {
                    afterrender: function (textArea) {
                        $('#' + textArea.getId()).emojiarea({
                            button: '#emojiesButton'
                        });
                    }
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});

And the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/36vs