ExtJS: Add font family custom drop down in toolbar

ExtJS has some command to make it easy. ExtJS has some font names, but if you want more font then you
shoud make your own component. The following component override the existing font names with some
font name you provide, such I provide extra font name "Candara" here.
Some command in ExtJS HtmlEditor:
this.execCmd('InsertHTML','    ');
this.execCmd('InsertText','\t');

this.execCmd('useCSS', true);

this.execCmd('styleWithCSS', false);


doc = this.getDoc();

doc.queryCommandValue('FontName');
doc.queryCommandState('bold');

doc.queryCommandState('italic');

doc.queryCommandState('underline');

doc.queryCommandState('justifyleft');

doc.queryCommandState('justifycenter');

doc.queryCommandState('insertorderedlist');

doc.queryCommandState('insertunorderedlist');

this.insertAtCursor('<hr/>');

r = doc.selection.createRange();

r.collapse(true); r.pasteHTML('    '); this.deferFocus();

Ext.form.HtmlEditor.Font = Ext.extend(Ext.util.Observable, {
    init: function(cmp){
        this.cmp = cmp;
        this.cmp.on('render', this.onRender, this);
    },
    // private
    onRender: function(){
        var cmp = this.cmp;
        var fonts = function(){
            var fnts = [];
            Ext.each(cmp.fontFamilies, function(itm){
                fnts.push([itm.toLowerCase(),itm]);
            });
            fnts.push(["candara", "Candara"]);
            return fnts;
        }();
        var btn = this.cmp.getToolbar().addItem({
            xtype: 'combo',
            displayField: 'display',
            valueField: 'value',
            name: 'fontfamily',
            forceSelection: true,
            selectOnFocus: true,
            selected: "Candara",
            editable: false,
            mode: 'local',
            triggerAction: 'all',
            width: 80,
            emptyText: 'Font',
            tpl: '<tpl for="."><div class="x-combo-list-item" style="font-family:{value};">{display}</div></tpl>',
            store: {
                xtype: 'arraystore',
                autoDestroy: true,
                fields: ['value','display'],
                data: fonts
            },
            listeners: {
                'select': function(combo,rec){
                    cmp.relayCmd('FontName', rec.get('value'));
                },
                scope: cmp
            }
        });
    }
});