I'm working on an extended version of the Template plugin which will need three listboxes when done, as part of work on experimenting with using TinyMCE instead of a competing editor in our product, ProVerbial.

This is a work in progress, but the function onSelectOrderType() shows how to dynamically update a listbox. Basically, each of the templates in the list returned by the XHR contains an attribute 'afts' which is an array of items (second listbox) related to the order type (first listbox).

My code is based on the Template plugin (from TinyMCE 4.1.6) (some irrelevant code cut):

tinymce.PluginManager.add('pvbTextTemplateSelection', function(editor, url) {
    var each = tinymce.each;

    function createTemplateList(callback) {
        return function() {

            tinymce.util.XHR.send({
                          cut…
            });
        };
    }

    function showDialog(templateList) {
        var win, values = [], templateHtml;

        if (!templateList || templateList.length === 0) {
            editor.windowManager.alert('No templates defined');
            return;
        }

        // Entries for the first listbox
        tinymce.each(templateList, function(template) {
            var orderTypeListEntry = {
                                      selected: !values.length,
                                    text: template.title,
                                    value: {
                                        url: template.url,
                                        content: template.content,
                                        description: template.description,
                                        afts: [] // Contains the related entries for the second listbox
                                    }
                                };
           
            values.push(orderTypeListEntry);
           
            // Related entries for the second listbox
            tinymce.each(template.afts, function(aft) {
                orderTypeListEntry.value.afts.push({
                    selected: false,
                    text: aft,
                    value: {
                        description: aft,
                        content: 'Content.'+aft
                    }
                });
            });
        });

        function onSelectOrderType(e) {
            var value = e.control.value();
           
            var listbox = win.find('#aft')[0]; // Find the second listbox

            var container = win.find('container')[0]; // Find the container around the listboxes
            var newListbox = container.create({ type: 'listbox', label: 'AFT', name: 'aft', values: value.afts, onselect: onSelectAFT});  // Create the replacement listbox
           
            container.replace(listbox, newListbox[0]); // Replace the old with the new
            container.renderNew(); // Show the new listbox. Without this, the new listbox is never drawn
        }

        function onSelectAFT(e) {
            cut… // Actions on selecting an entry in the second listbox
        }

        win = editor.windowManager.open({
            title: 'Textbaustein einsetzen',
            layout: 'flex',
            direction: 'column',
            align: 'stretch',
            padding: 15,
            spacing: 10,

            items: [
                {type: 'form', flex: 0, padding: 0, items: [
                    {type: 'container', label: 'Order Type/AFT', items: [{
                        type: 'listbox', label: 'Order Type', name: 'ordertype', values: values, onselect: onSelectOrderType
                    },
                    { type: 'listbox', label: 'AFT', name: 'aft', values: [{selected: true, text: 'Dummy', value: 'DummyValue'}], onselect: onSelectAFT}]}
                ]},
                {type: 'label', name: 'description', label: 'Description', text: '\u00a0'},
                {type: 'iframe', flex: 1, border: 1}
            ],

            onsubmit: function() {
                insertTemplate(false, templateHtml);
            },

            width: 1000,
            height: 800
        });

        win.find('listbox')[0].fire('select');
    }

        Rest cut, basically "Template" plugin code adjusted to the new plugin name

Last edited by sbuf (2014-10-30 00:57:46)

The solution is the first line of onSelectOrderType() above.

I've updated my code since my original post. I now create a listbox with

{
                    type : 'listbox',
                    label : 'pvb.templates.selection.label.language_selection',
                    onclick : function() {
                        onSelectLanguage(this.value());
                    },
                    values : languages,
                    value : selectedLanguage
                }

The 'onclick' handler calls my function with the selected value of the listbox.