SplitButton and MenuButton

Probably, somebody also experiences difficulties with dealing with SplitButton and MenuButton when you add new items, select an item, replace it with new items. To deal with those items, you need to call getMenu().

1. To clear existing items, call clearContent() of getMenu()

   split.getMenu().clearContent();
   split.set("label", "Choose One");


2. To add item(s), call addItem() or addItems(). Remember each item has three properties: "text", "value", and "onclick". After calling this method, you need to call render by passing the container of this button, otherwise it won't appear on the browser.

   split.getMenu().addItems(splitData);
   split.getMenu().render(split.get('container'));


3. To replace with new data, just combine two previous snippet codes

   split.getMenu().clearContent();
   split.set("label", "Choose One");
   split.getMenu().addItems(splitData);
   split.getMenu().render(split.get('container'));


4. To enable selection when clicking on each item, each item must have onclick property with an object literal as shown below:

splitData = {
   fn: function(type, args, item) {
      split_group.set("label", item.cfg.getProperty("text"));
   }
}