PDA

View Full Version : How make option selected using tpl



johniman
20 Jan 2016, 7:06 AM
Hi! I have own written plugin for htmleditor where you can use combo to choose font size. To render combo I'm using tpl, but now I need to have a setting for set default font size in combo. I've created the variable when define plugin and pass this variable to renderData, but I can't understand how I can use this variable inside tpl. Thanks a lot for your answers!




Ext.define('MyApp.FontSizePlugin', {

alternateClassName: 'MyApp.FontSizePlugin',
alias: 'plugin.fontsizeplugin',

requires: [
'Ext.tip.QuickTipManager',
'Ext.form.field.HtmlEditor'
],

mixins: {
observable: 'Ext.util.Observable'
},

fontSizes : [
'8',
'10',
'12',
'14',
'18',
'24',
'36'
],

defaultSize: '10',

constructor: function(config) {
Ext.apply(this, config);
},

init: function (editor) {
var me = this;
me.editor = editor;

me.mon(editor, 'initialize', me.onInitialize, me);
},

onInitialize: function(){
var me = this,
baseCSSPrefix = Ext.baseCSSPrefix;

var toolbar = me.editor.toolbar;

var fontSizeItem = Ext.widget('component', {
itemId: 'fontSizeSelect',
renderTpl: [
'<select id="{id}-selectEl" class="' + baseCSSPrefix + 'font-size-select">',
'<tpl for="fonts">',
'<option value="{[values]}">{.}</option>',
'</tpl>',
'</select>'
],
childEls: ['selectEl'],
afterRender: function() {
me.fontSizeSelect = this.selectEl;
Ext.Component.prototype.afterRender.apply(this, arguments);
},
renderData: {
cls: baseCSSPrefix + 'font-size-select',
fonts: me.fontSizes,
defaultSize: me.defaultSize
},
renderSelectors: {
selectEl: 'select'
},
onDisable: function() {
var selectEl = this.selectEl;
if (selectEl) {
selectEl.dom.disabled = true;
}
Ext.Component.superclass.onDisable.apply(this, arguments);
},
onEnable: function() {
var selectEl = this.selectEl;
if (selectEl) {
selectEl.dom.disabled = false;
}
Ext.Component.superclass.onEnable.apply(this, arguments);
},
listeners: {
change: function() {
me.editor.win.focus();
var size;
switch (me.fontSizeSelect.dom.value){
case "8": size = 1; break;
case "10": size = 2; break;
case "12": size = 3; break;
case "14": size = 4; break;
case "18": size = 5; break;
case "24": size = 6; break;
case "36": size = 7; break;
default: size = 2;
}
me.editor.relayCmd('fontSize', size);
me.editor.deferFocus();
},
element: 'selectEl'
}
});

toolbar.add(fontSizeItem);
}
});

Gary Schlosberg
20 Jan 2016, 8:02 AM
If no one offers the answer, you might try putting your code into a Fiddle so that others can have a play with it and better make suggestions.
https://fiddle.sencha.com/#home