TinyMCE:API/tinymce.ui.ListBox

From Moxiecode Documentation Wiki

Jump to: navigation, search

Contents

Class: tinymce.ui.ListBox extends tinymce.ui.Control

This class is used to create list boxes/select list. This one will generate a non native control. This one has the benefits of having visual items added. To see this class in action check the Custom listbox/splitbutton example out.

Methods

add
Adds a option item to the list box.
getLength
Returns the number of items inside the list box.
hideMenu
Hides the drop menu.
postRender
Post render event.
renderHTML
Renders the list box as a HTML string.
renderMenu
Renders the menu to the DOM.
select
Selects a item/option by value.
selectByIndex
Selects a item/option by index.
showMenu
Displays the drop menu with all items.

Methods inherited from tinymce.ui.Control

setDisabled,isDisabled,setActive,isActive,setState,isRendered,renderHTML,renderTo,postRender,destroy

Examples

// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.ExamplePlugin', {
    createControl: function(n, cm) {
        switch (n) {
            case 'mylistbox':
                var mlb = cm.createListBox('mylistbox', {
                     title : 'My list box',
                     onselect : function(v) {
                         tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                     }
                });

                // Add some values to the list box
                mlb.add('Some item 1', 'val1');
                mlb.add('some item 2', 'val2');
                mlb.add('some item 3', 'val3');

                // Return the new listbox instance
                return mlb;
        }

        return null;
    }
});

// Register plugin with a short name
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);

// Initialize TinyMCE with the new plugin and button
tinyMCE.init({
   ...
   plugins : '-example', // - means TinyMCE will not try to load it
   theme_advanced_buttons1 : 'mylistbox' // Add the new example listbox to the toolbar
});
Personal tools