Class Index | File Index

Classes

Class Ozone.chrome.WidgetChrome


Defined in: WidgetChrome.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
Ozone.chrome.WidgetChrome(config)
This object allows a widget to modify the button contained in the widget header (the chrome).
Method Summary
Method Attributes Method Name and Description
 
addHeaderButtons(cfg)
Adds buttons to the Widget Chrome.
 
addHeaderMenus(cfg)
Adds menus to the Widget Chrome.
<static>  
Ozone.chrome.WidgetChrome.getInstance(config)
Retrieves Ozone.chrome.WidgetChrome Singleton instance.
 
insertHeaderButtons(cfg)
Inserts new buttons to the Widget Chrome.
 
insertHeaderMenus(cfg)
Inserts new menus into the Widget Chrome.
 
isModified(cfg)
Checks to see if the Widget Chrome has already been modified.
 
listHeaderButtons(cfg)
Lists all buttons that have been added to the widget chrome.
 
listHeaderMenus(cfg)
Lists all menus that have been added to the widget chrome.
 
removeHeaderButtons(cfg)
Removes existing buttons on the Widget Chrome based on itemId.
 
removeHeaderMenus(cfg)
Removes existing menus on the Widget Chrome based on itemId.
 
updateHeaderButtons(cfg)
Updates any existing buttons in the Widget Chrome based on the itemId.
 
updateHeaderMenus(cfg)
Updates any existing menus in the Widget Chrome based on the itemId.
Class Detail
Ozone.chrome.WidgetChrome(config)
This object allows a widget to modify the button contained in the widget header (the chrome). To do so it requires a widgetEventingController 
   this.wc = new Ozone.chrome.WidgetChrome({
       widgetEventingController: this.widgetEventingController
   });
Parameters:
{Object} config
- config object with parameters
{Ozone.eventing.Widget} config.widgetEventingController
- widget eventing object which handles eventing for the widget
Deprecated:
Since OWF 3.7.0 You should use Ozone.chrome.WidgetChrome.getInstance
Throws:
{Error}
throws an error with a message if widget initialization fails
Method Detail
addHeaderButtons(cfg)
Adds buttons to the Widget Chrome. Buttons are added after existing buttons. 
    //this.wc is an already instantiated WidgetChrome obj
    this.wc.addHeaderButtons({
            items:
             [
              {
                xtype: 'button',
                //path to an image to use. this path should either be fully qualified or relative to the /owf context
                icon: './themes/common/images/skin/exclamation.png',
                text: 'Alert',
                itemId:'alert',
                tooltip:  {
                  text: 'Alert!'
                },
                handler: function(sender, data) {
                  //widgetState is an already instantiated WidgetState Obj
                  if (widgetState) {
                    widgetState.getWidgetState({
                        callback: function(state) {

                          //check if the widget is visible
                          if (!state.collapsed && !state.minimized && state.active) {
                            //only render visual content, perhaps popup a message box if the widget is visible
                            //otherwise it may not render correctly
                          }
                        }
                    });
                  }
                }
              },
              {
                xtype: 'widgettool',
                //path to an image to use. this path should either be fully qualified or relative to the /owf context
                icon: './themes/common/images/skin/information.png',
                itemId:'help',
                handler: function(sender, data) {
                  alert('About Button Pressed');
                }
              },
              {
                //gear is a standard ext tool type
                type: 'gear',
                itemId:'gear',
                handler: function(sender, data) {
                  alert('Utility Button Pressed');
                }
              }
            ]
    });
Parameters:
{Object} cfg
config object see below for properties
{Object[]} cfg.items
an array of buttons configurations to add to the chrome. See example for button configs
{String} cfg.items[*].itemId
itemId is a unique id among all buttons that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function. If itemId is not unique this may result in duplicate buttons which may not be able to be removed properly.
{String} cfg.items[*].xtype
xtype is ExtJS-like property used to determine the component to create. Currently the Widget Chrome API only supports two xtype values: ‘button’ and ‘widgettool’. xtype is an optional field, if it is omitted ‘widgettool’ is used.
{String} cfg.items[*].type
Used only for ‘widgettool’ buttons. It determines the standard icon to be used. For a complete list of types please see the ExtJS 4.x API documentation, http://docs.sencha.com/ext-js/4-0/#/api/Ext.panel.Tool-cfg-type
{String} cfg.items[*].icon
This property defines the URL of the image to be used for the button. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].text
This property defines text to appear alongside the button. This property is only used if the xtype is ‘button.’ ‘widgettool’ will not show text.
{Object} cfg.items[*].tooltip
This property defines a tooltip. It has two important sub properties, title and text. tooltip is only used when the xtype is ‘button’
{Function} cfg.items[*].handler
The handler attribute defines a function to be executed when the button is pressed. This function is executed using Widget Eventing API from inside the widget. The internal channel name used is the itemId attribute. This function’s parameter list contains the standard parameters for an Eventing callback function.
addHeaderMenus(cfg)
Adds menus to the Widget Chrome. Menus are added after existing menus. 
    //this.wc is an already instantiated WidgetChrome obj
    this.wc.addHeaderMenus({
            items:
             [
				{
					itemId:'regularMenu',
					icon: './themes/common/images/skin/exclamation.png',
					text: 'Regular Menu',
					menu: {
						items: [
						    {
						    	itemId:'regularMenuItem1',
						    	icon: './themes/common/images/skin/exclamation.png',
						    	text: 'Regular Menu Item 1',
						    	handler: function(sender, data) {
						    		alert('You clicked the Regular Menu menu item.');
						    	}
						    }
						]
					}
				},
				{
					itemId:'snacks',
					icon: './themes/common/images/skin/exclamation.png',
					text: 'Menu with Sub-Menu',
					menu: {
						items: [
						    {
						    	itemId:'fruits',
						    	icon: './themes/common/images/skin/exclamation.png',
						    	text: 'Fruits',
						    	menu: {
							    	items: [
							    	    {
							    	    	itemId:'apple',
							    	    	icon: './themes/common/images/skin/exclamation.png',
							    	    	text: 'Apple',
							    	    	handler: function(sender, data) {
							    	    		alert('Your snack will be an Apple.');
							    	    	}
							    	    },
                                       {
                                           xtype: 'menuseparator'
                                       },
							    	    {
							    	    	itemId:'banana',
							    	    	icon: './themes/common/images/skin/exclamation.png',
							    	    	text: 'Banana',
							    	    	handler: function(sender, data) {
							    	    		alert('Your snack will be a Banana.');
							    	    	}
							    	    }, {
							    	    	itemId:'cherry',
							    	    	icon: './themes/common/images/skin/exclamation.png',
							    	    	text: 'Cherries',
							    	    	handler: function(sender, data) {
							    	    		alert('Your snack will be Cherries.');
							    	    	}
							    	    }
							    	]
						    	}
						    },
							'-', // another way to add a menu separator 
							{
						    	itemId:'cupcake',
						    	icon: './themes/common/images/skin/exclamation.png',
						    	text: 'Cupcake',
						    	handler: function(sender, data) {
						    		alert('Your snack will be a Cupcake.');
						    	}
						    }, {
						    	itemId:'chips',
						    	icon: './themes/common/images/skin/exclamation.png',
						    	text: 'Potato Chips',
						    	handler: function(sender, data) {
						    		alert('Your snack will be a Potato Chips.');
						    	}
						    }
						]
					}
				}
            ]
    });
Parameters:
{Object} cfg
config object see below for properties
{Object[]} cfg.items
an array of menu configurations to add to the chrome. See example for menu configs
{String} cfg.items[*].parentId
itemId is the itemId of the menu to which this configuration should be added as a sub-menu. If omitted, the configuration will be added as a main menu on the menu toolbar.
{String} cfg.items[*].itemId
itemId is a unique id among all menus that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function. If itemId is not unique this may result in duplicate menus which may not be able to be removed properly.
{String} cfg.items[*].icon
This property defines the URL of the image to be used for the menu. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].text
This property defines text to appear alongside the menu.
{Object} cfg.items[*].menu
menu configuration object
{Object[]} cfg.items[*].menu.items
an array of menu item configurations to add to the chrome. See example for menu item configs
{String} cfg.items[*].menu.items[*].itemId
itemId is a unique id among all menu items that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function.
{String} cfg.items[*].menu.items[*].xtype
xtype is used to specify the type of menu item to add. This attribute should be omitted unless specifying a menuseparator. Setting this value to "menuseparator" adds a separator bar to a menu, used to divide logical groups of menu items. If specified, only xtype should be specified. Generally you will add one of these by using "-" in your items config rather than creating one directly using xtype. See example below for usage.
{String} cfg.items[*].menu.items[*].icon
This property defines the URL of the image to be used for the menu item. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].menu.items[*].text
This property defines text to appear for the menu item.
{Function} cfg.items[*].menu.items[*].handler
The handler attribute defines a function to be executed when the menu item is clicked. This function is executed using Widget Eventing API from inside the widget. The internal channel name used is the itemId attribute. This function's parameter list contains the standard parameters for an Eventing callback function.
{Object} cfg.items[*].menu.items[*].menu
sub-menu configuration object. See example for sub-menu config.
<static> Ozone.chrome.WidgetChrome.getInstance(config)
Retrieves Ozone.chrome.WidgetChrome Singleton instance. To do so it requires a widgetEventingController 
   this.wc = Ozone.chrome.WidgetChrome.getInstance({
       widgetEventingController: this.widgetEventingController
   });
Parameters:
{Object} config
- config object with parameters
{Ozone.eventing.Widget} config.widgetEventingController
- widget eventing object which handles eventing for the widget
Throws:
{Error}
throws an error with a message if widget initialization fails
insertHeaderButtons(cfg)
Inserts new buttons to the Widget Chrome. Buttons are added to the same area as existing buttons. 
    //this.wc is an already instantiated WidgetChrome obj
    this.wc.insertHeaderButtons({
            pos: 0,
            items:
             [
              {
                xtype: 'button',
                //path to an image to use. this path should either be fully qualified or relative to the /owf context
                icon: './themes/common/images/skin/exclamation.png',
                text: 'Alert',
                itemId:'alert',
                tooltip:  {
                  text: 'Alert!'
                },
                handler: function(sender, data) {
                  //widgetState is an already instantiated WidgetState Obj
                  if (widgetState) {
                    widgetState.getWidgetState({
                        callback: function(state) {

                          //check if the widget is visible
                          if (!state.collapsed && !state.minimized && state.active) {
                            //only render visual content, perhaps popup a message box if the widget is visible
                            //otherwise it may not render correctly
                          }
                        }
                    });
                  }
                }
              },
              {
                xtype: 'widgettool',
                //path to an image to use. this path should either be fully qualified or relative to the /owf context
                icon: './themes/common/images/skin/information.png',
                itemId:'help',
                handler: function(sender, data) {
                  alert('About Button Pressed');
                }
              },
              {
                //gear is a standard ext tool type
                type: 'gear',
                itemId:'gear',
                handler: function(sender, data) {
                  alert('Utility Button Pressed');
                }
              }
            ]
    });
Parameters:
{Object} cfg
config object see below for properties
{Number} cfg.pos Optional, Default: 0
0-based index of where buttons will be added, among any pre-existing buttons.
{Object[]} cfg.items
an array of buttons configurations to insert to the chrome. See example below for button configs
{String} cfg.items[*].itemId
itemId is a unique id among all buttons that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function. If itemId is not unique this may result in duplicate buttons which may not be able to be removed properly.
{String} cfg.items[*].xtype
xtype is ExtJS-like property used to determine the component to create. Currently the Widget Chrome API only supports two xtype values: ‘button’ and ‘widgettool’. xtype is an optional field, if it is omitted ‘widgettool’ is used.
{String} cfg.items[*].type
Used only for ‘widgettool’ buttons. It determines the standard icon to be used. For a complete list of types please see the ExtJS 4.x API documentation, http://docs.sencha.com/ext-js/4-0/#/api/Ext.panel.Tool-cfg-type
{String} cfg.items[*].icon
This property defines the URL of the image to be used for the button. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].text
This property defines text to appear alongside the button. This property is only used if the xtype is ‘button.’ ‘widgettool’ will not show text.
{Object} cfg.items[*].tooltip
This property defines a tooltip. It has two important sub properties, title and text. tooltip is only used when the xtype is ‘button’
{Function} cfg.items[*].handler
The handler attribute defines a function to be executed when the button is pressed. This function is executed using Widget Eventing API from inside the widget. The internal channel name used is the itemId attribute. This function’s parameter list contains the standard parameters for an Eventing callback function.
insertHeaderMenus(cfg)
Inserts new menus into the Widget Chrome. Menus are added to the same area as existing menus. 
    //this.wc is an already instantiated WidgetChrome obj
    this.wc.insertHeaderMenus({
            pos: 0,
            items: [{
			 itemId:'insertedMenu',
				icon: './themes/common/images/skin/exclamation.png',
				text: 'Inserted Menu',
				menu: {
					items: [
					    {
					    	itemId:'insertedMenuItem1',
					    	icon: './themes/common/images/skin/exclamation.png',
					    	text: 'Inserted Menu Item 1',
					    	handler: function(sender, data) {
					    		alert('You clicked the Inserted Menu menu item.');
					    	}
					    },
					    {
					    	xtype: 'menuseparator'
					    },
					    {
					    	itemId:'insertedMenuItem2',
					    	icon: './themes/common/images/skin/exclamation.png',
					    	text: 'Inserted Menu Item 2',
					    	handler: function(sender, data) {
					    		alert('You clicked the Inserted Menu menu item.');
					    	}
						},
						'-', // another way to add a menu separator 
						{
					    	itemId:'insertedMenuItem3',
					    	icon: './themes/common/images/skin/exclamation.png',
					    	text: 'Inserted Menu Item 3',
					    	handler: function(sender, data) {
					    		alert('You clicked the Inserted Menu menu item.');
					    	}
					    }
					]
				}
			}]
    });
Parameters:
{Object} cfg
config object see below for properties
{Number} cfg.pos Optional, Default: 0
0-based index of where menus will be added, among any pre-existing menus.
{Object[]} cfg.items
an array of menu configurations to add to the chrome. See example for menu configs
{String} cfg.items[*].parentId
itemId is the itemId of the menu to which this configuration should be added as a sub-menu. If omitted, the configuration will be added as a main menu on the menu toolbar.
{String} cfg.items[*].itemId
itemId is a unique id among all menus that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function. If itemId is not unique this may result in duplicate menus which may not be able to be removed properly.
{String} cfg.items[*].icon
This property defines the URL of the image to be used for the menu. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].text
This property defines text to appear alongside the menu. This property is only used if the xtype is ‘menu.’ ‘widgettool’ will not show text.
{Object} cfg.items[*].menu
menu configuration object
{Object[]} cfg.items[*].menu.items
an array of menu item configurations to add to the chrome. See example for menu item configs
{String} cfg.items[*].menu.items[*].itemId
itemId is a unique id among all menu items that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function.
{String} cfg.items[*].menu.items[*].xtype
xtype is used to specify the type of menu item to add. This attribute should be omitted unless specifying a menuseparator. Setting this value to "menuseparator" adds a separator bar to a menu, used to divide logical groups of menu items. If specified, only xtype should be specified. See example below for usage.
{String} cfg.items[*].menu.items[*].icon
This property defines the URL of the image to be used for the menu item. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].menu.items[*].text
This property defines text to appear for the menu item.
{Function} cfg.items[*].menu.items[*].handler
The handler attribute defines a function to be executed when the menu item is clicked. This function is executed using Widget Eventing API from inside the widget. The internal channel name used is the itemId attribute. This function's parameter list contains the standard parameters for an Eventing callback function.
{Object} cfg.items[*].menu.items[*].menu
sub-menu configuration object. See example for sub-menu config.
isModified(cfg)
Checks to see if the Widget Chrome has already been modified. This is useful if the widget iframe is reloaded 
   //this.wc is an already instantiated WidgetChrome obj
   this.wc.isModified({
    callback: function(msg) {
        //msg will always be a json string
        var res = Ozone.util.parseJson(msg);
        if (res.success) {

            //if the chrome was never modified
            if (!res.modified) {
               //do something, perhaps add buttons
            }
            //if we already modified the chrome
            else {
              //do something or perhaps nothing if the buttons are already added
            }
        }
    }
  });
Parameters:
{Object} cfg
config object see below for properties
{Function} cfg.callback
The function which receives the results. This method will be passed an object which has following properties.

{Boolean} success: true if the widget is currently opened on the dashboard, or else false.
{Boolean} modified: true if the widget chrome(header) is modified, or else false.
listHeaderButtons(cfg)
Lists all buttons that have been added to the widget chrome. 
   //this.wc is an already instantiated WidgetChrome obj
   this.wc.listHeaderButtons({
    callback: function(msg) {
        //msg will always be a json string
        var res = Ozone.util.parseJson(msg);
        if (res.success) {
            for (var i = 0; i < res.items.length; i++) {
            	// do something with the buttons
            }
        }
    }
  });
Parameters:
{Object} cfg
config object see below for properties
{Function} cfg.callback
The function which receives the results.
listHeaderMenus(cfg)
Lists all menus that have been added to the widget chrome. 
   //this.wc is an already instantiated WidgetChrome obj
   this.wc.listHeaderMenus({
    callback: function(msg) {
        //msg will always be a json string
        var res = Ozone.util.parseJson(msg);
        if (res.success) {
            for (var i = 0; i < res.items.length; i++) {
            	// do something with the menus
            }
        }
    }
  });
Parameters:
{Object} cfg
config object see below for properties
{Function} cfg.callback
The function which receives the results.
removeHeaderButtons(cfg)
Removes existing buttons on the Widget Chrome based on itemId. 
    //this.wc is an already instantiated WidgetChrome obj
    this.wc.removeHeaderButtons({
            items:
             [
              {
                itemId:'alert'
              },
              {
                itemId:'help'
              },
              {
                itemId:'gear'
              }
            ]
    });
Parameters:
{Object} cfg
config object see below for properties
{Object[]} cfg.items
an array of buttons configurations to remove to the chrome. Only itemId is required. See example below for button configs
{String} cfg.items[*].itemId
itemId is a unique id among all buttons that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function. If itemId is not unique this may result in duplicate buttons which may not be able to be removed properly.
removeHeaderMenus(cfg)
Removes existing menus on the Widget Chrome based on itemId. 
    //this.wc is an already instantiated WidgetChrome obj
    this.wc.removeHeaderMenus({
            items: [{
           	 itemId: 'regularMenu'
            }]
    });
Parameters:
{Object} cfg
config object see below for properties
{Object[]} cfg.items
an array of objects containing itemIds for the menus to remove from the chrome. See example below for button configs
updateHeaderButtons(cfg)
Updates any existing buttons in the Widget Chrome based on the itemId. 
    //this.wc is an already instantiated WidgetChrome obj
    this.wc.updateHeaderButtons({
            items:
             [
              {
                xtype: 'button',
                //path to an image to use. this path should either be fully qualified or relative to the /owf context
                icon: './themes/common/images/skin/exclamation.png',
                text: 'Alert',
                itemId:'alert',
                tooltip:  {
                  text: 'Alert!'
                },
                handler: function(sender, data) {
                  //widgetState is an already instantiated WidgetState Obj
                  if (widgetState) {
                    widgetState.getWidgetState({
                        callback: function(state) {

                          //check if the widget is visible
                          if (!state.collapsed && !state.minimized && state.active) {
                            //only render visual content, perhaps popup a message box if the widget is visible
                            //otherwise it may not render correctly
                          }
                        }
                    });
                  }
                }
              },
              {
                xtype: 'widgettool',
                //path to an image to use. this path should either be fully qualified or relative to the /owf context
                icon: './themes/common/images/skin/information.png',
                itemId:'help',
                handler: function(sender, data) {
                  alert('About Button Pressed');
                }
              },
              {
                //gear is a standard ext tool type
                type: 'gear',
                itemId:'gear',
                handler: function(sender, data) {
                  alert('Utility Button Pressed');
                }
              }
            ]
    });
Parameters:
{Object} cfg
config object see below for properties
{Object[]} cfg.items
an array of buttons configurations to add to the chrome. See example below for button configs
{String} cfg.items[*].itemId
itemId is a unique id among all buttons that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function. If itemId is not unique this may result in duplicate buttons which may not be able to be removed properly.
{String} cfg.items[*].xtype
xtype is ExtJS-like property used to determine the component to create. Currently the Widget Chrome API only supports two xtype values: ‘button’ and ‘widgettool’. xtype is an optional field, if it is omitted ‘widgettool’ is used.
{String} cfg.items[*].type
Used only for ‘widgettool’ buttons. It determines the standard icon to be used. For a complete list of types please see the ExtJS 4.x API documentation, http://docs.sencha.com/ext-js/4-0/#/api/Ext.panel.Tool-cfg-type
{String} cfg.items[*].icon
This property defines the URL of the image to be used for the button. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].text
This property defines text to appear alongside the button. This property is only used if the xtype is ‘button.’ ‘widgettool’ will not show text.
{Object} cfg.items[*].tooltip
This property defines a tooltip. It has two important sub properties, title and text. tooltip is only used when the xtype is ‘button’
{Function} cfg.items[*].handler
The handler attribute defines a function to be executed when the button is pressed. This function is executed using Widget Eventing API from inside the widget. The internal channel name used is the itemId attribute. This function’s parameter list contains the standard parameters for an Eventing callback function.
updateHeaderMenus(cfg)
Updates any existing menus in the Widget Chrome based on the itemId. 
    //this.wc is an already instantiated WidgetChrome obj
    this.wc.updateHeaderMenus({
            items:
             [
				{
					itemId:'regularMenu',
					icon: './themes/common/images/skin/exclamation.png',
					text: 'Regular Menu',
					menu: {
						items: [
						    {
						    	itemId:'regularMenuItem1',
						    	icon: './themes/common/images/skin/exclamation.png',
						    	text: 'Regular Menu Item 1',
						    	handler: function(sender, data) {
						    		alert('You clicked the Regular Menu menu item.');
						    	}
						    }
						]
					}
				},
				{
					itemId:'snacks',
					icon: './themes/common/images/skin/exclamation.png',
					text: 'Menu with Sub-Menu',
					menu: {
						items: [
						    {
						    	itemId:'fruits',
						    	icon: './themes/common/images/skin/exclamation.png',
						    	text: 'Fruits',
						    	menu: {
							    	items: [
							    	    {
							    	    	itemId:'apple',
							    	    	icon: './themes/common/images/skin/exclamation.png',
							    	    	text: 'Apple',
							    	    	handler: function(sender, data) {
							    	    		alert('Your snack will be an Apple.');
							    	    	}
							    	    },
                                       {
                                           xtype: 'menuseparator'
                                       },
							    	    {
							    	    	itemId:'banana',
							    	    	icon: './themes/common/images/skin/exclamation.png',
							    	    	text: 'Banana',
							    	    	handler: function(sender, data) {
							    	    		alert('Your snack will be a Banana.');
							    	    	}
							    	    }, {
							    	    	itemId:'cherry',
							    	    	icon: './themes/common/images/skin/exclamation.png',
							    	    	text: 'Cherries',
							    	    	handler: function(sender, data) {
							    	    		alert('Your snack will be Cherries.');
							    	    	}
							    	    }
							    	]
						    	}
						    },
							'-', // another way to add a menu separator 
							{
						    	itemId:'cupcake',
						    	icon: './themes/common/images/skin/exclamation.png',
						    	text: 'Cupcake',
						    	handler: function(sender, data) {
						    		alert('Your snack will be a Cupcake.');
						    	}
						    }, {
						    	itemId:'chips',
						    	icon: './themes/common/images/skin/exclamation.png',
						    	text: 'Potato Chips',
						    	handler: function(sender, data) {
						    		alert('Your snack will be a Potato Chips.');
						    	}
						    }
						]
					}
				}
            ]
    });
Parameters:
{Object} cfg
config object see below for properties
{Object[]} cfg.items
an array of menu configurations to add to the chrome. See example for menu configs
{String} cfg.items[*].itemId
itemId is a unique id among all menus that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function. If itemId is not unique this may result in duplicate menus which may not be able to be removed properly.
{String} cfg.items[*].icon
This property defines the URL of the image to be used for the menu. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].text
This property defines text to appear alongside the menu.
{Object} cfg.items[*].menu
menu configuration object
{Object[]} cfg.items[*].menu.items
an array of menu item configurations to add to the chrome. See example for menu item configs
{String} cfg.items[*].menu.items[*].itemId
itemId is a unique id among all menu items that are added. It is a required property. It is used for identification and defines the internal Eventing channel which is used to execute the handler function.
{String} cfg.items[*].menu.items[*].xtype
xtype is used to specify the type of menu item to add. This attribute should be omitted unless specifying a menuseparator. Setting this value to "menuseparator" adds a separator bar to a menu, used to divide logical groups of menu items. If specified, only xtype should be specified. See example below for usage.
{String} cfg.items[*].menu.items[*].icon
This property defines the URL of the image to be used for the menu item. If the URL is a relative path, it will be relative to the /owf context. This is useful if the desired image is hosted by the OWF web server. Otherwise a fully qualified URL should be used. If type is being used to determine the image, the icon property is optional
{String} cfg.items[*].menu.items[*].text
This property defines text to appear for the menu item.
{Function} cfg.items[*].menu.items[*].handler
The handler attribute defines a function to be executed when the menu item is clicked. This function is executed using Widget Eventing API from inside the widget. The internal channel name used is the itemId attribute. This function's parameter list contains the standard parameters for an Eventing callback function.
{Object} cfg.items[*].menu.items[*].menu
sub-menu configuration object. See example for sub-menu config.
Documentation generated by JsDoc Toolkit 2.3.2 on Fri Oct 05 2012 16:51:04 GMT-0400 (EDT)