How to dynamic create custom controls - tinymce

Question

I am trying to add a customized mymenubutton, the menu's items are based on another dropdown's selected value, which returns a json array with bunch items.
So I use the example http://fiddle.tinymce.com/gaaaab which could create mymenubutton for the first time, but when the drop down list changes, how should I re-init this control and rebind json array to mymenubutton?
function generateTokensList(result) {
tinymce.create('tinymce.plugins.ExamplePlugin', {
createControl: function (n, cm) {
switch (n) {
case 'mysplitbutton':
var c = cm.createSplitButton('mysplitbutton', {
title: 'My split button',
image: 'some.gif',
onclick: function () {
alert('Button was clicked.');
}
});
c.onRenderMenu.add(function (c, m) {
m.add({ title: 'Tokens', 'class': 'mceMenuItemTitle' }).setDisabled(1);
var insertVar = function (val) {
return function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val); }
};
for (var i = 0; i < result.length; i++) {
var field = result[i].field;
var variable = insertVar(result[i].field);
m.add({ title: result[i].name, onclick: variable });
}
});
// Return the new splitbutton instance
return c;
}
return null;
}
});
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
}

Answer 1

Solved this by myself. Bind the data to a variable and each time just call var.
c.onRenderMenu.add(function (c, m) {
m.add({ title: 'Tokens', 'class': 'mceMenuItemTitle' }).setDisabled(1);
var insertVar = function (val) {
return function () { tinyMCE.activeEditor.execCommand('mceInsertContent', false, val); }
};
for (var i = 0; i < tokens.length; i++) {
var field = tokens[i].field;
var variable = insertVar( '[['+tokens[i].name+']]');
m.add({ title: '[['+tokens[i].name+']]', onclick: variable });
}
});