The use of checkboxes

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
Ext.define('Ametys.plugins.cms.editor.basicstyles.FontFamily', {
	singleton: true,

	/**
	 * Apply or remove "sub script" style
	 * @param {Ametys.ribbon.element.ui.ButtonController} controller The controller calling this function
	 */
	applyStyle: function (controller) {
		this.FontFamily();
		this._box.show();
		this._initDialog();

	},
    /**	     * 
     * Initialize the dialog
     * @param {String} [color] The current color value.
     * @private
     */
    _initDialog: function ()
    {
    	tinyMCE.activeEditor.execCommand('mceBeginUndoLevel');
	 	 var sele = tinyMCE.activeEditor.selection;
	 	 var node = tinyMCE.activeEditor.dom.getParent(sele.getNode(),'span');
		 	if (node != null) {
		 		var CurrentStyle=node.getAttribute("style");
		 			var json=[];
		 			CurrentStyle.split(/\s*;\s*/).forEach(function(myString) {
		 						json.push(myString);
		 				});
		 				var selectedColor=json[0].split(/\s*:\s*/);
		 				var selectedFontSize=json[1].split(/\s*[:px]\s*/);
		 				var selectedFontFamily=json[2].split(/\s*:\s*/);
		 				
						this.ColorPicker.setValue(selectedColor[1]);
				  		this.FontSize.getForm().setValues({ "FontSize": selectedFontSize[1]});
		 				this.FontFaces.setValue(selectedFontFamily[1]);
		 				
				tinyMCE.activeEditor.execCommand('mceEndUndoLevel');
			}
    },
    
    constructor: function () {
    		Ametys.data.ServerComm.callMethod({
    			role: "com.vastcms.util.js.VastCMSJSHelper",
    			methodName: "getFontFamily",
    			parameters: [],
    			callback: {
    				handler: this.jsonData,
    			},
    			errorMessage: true
    		});
    	},
    	jsonData: function (json) {
    		console.log(JSON.parse(json));
    		var data = JSON.parse(json);
    		var store = data.fontfamilies.fontfamily;
    		return store;
		},

	FontFamily: function ()...

JavaScript

//Defining a Controller
Ext.define('AM.controller.Pizza', {
    extend: 'Ext.app.Controller',
	singleton: true,

	/**
	 * Apply or remove "sub script" style
	 * @param {Ametys.ribbon.element.ui.ButtonController} controller The controller calling this function
	 */
	applyStyle: function (controller) {
		this.FontFamily();
		this._box.show();
		this._initDialog();

	},
    /**	     * 
     * Initialize the dialog
     * @param {String} [color] The current color value.
     * @private
     */
    _initDialog: function ()
    {
    	tinyMCE.activeEditor.execCommand('mceBeginUndoLevel');
	 	 var sele = tinyMCE.activeEditor.selection;
	 	 var node = tinyMCE.activeEditor.dom.getParent(sele.getNode(),'span');
		 	if (node != null) {
		 		var CurrentStyle=node.getAttribute("style");
		 			var json=[];
		 			CurrentStyle.split(/\s*;\s*/).forEach(function(myString) {
		 						json.push(myString);
		 				});
		 				var selectedColor=json[0].split(/\s*:\s*/);
		 				var selectedFontSize=json[1].split(/\s*[:px]\s*/);
		 				var selectedFontFamily=json[2].split(/\s*:\s*/);
		 				
						this.ColorPicker.setValue(selectedColor[1]);
				  		this.FontSize.getForm().setValues({ "FontSize": selectedFontSize[1]});
		 				this.FontFaces.setValue(selectedFontFamily[1]);
		 				
				tinyMCE.activeEditor.execCommand('mceEndUndoLevel');
			}
    },
    
    constructor: function () {
    		Ametys.data.ServerComm.callMethod({
    			role: "com.vastcms.util.js.VastCMSJSHelper",
    			methodName: "getFontFamily",
    			parameters: [],
    			callback: {
    				handler: this.jsonData,
    			},
    			errorMessage: true
    		});
    	},
    	jsonData: function (json) {
    		console.log(JSON.parse(json));
    		var data = JSON.parse(json);
    		var store = data.fontfamilies.fontfamily;
    		return store;
		},

	FontFamily: function () {
		this.constructor();
		if (this._initialized) {
			return;
		}
		this.FontFaces = Ext.create('Ext.form.ComboBox',{
			fieldLabel: 'Choose Font...