source: Dev/trunk/src/client/dijit/form/DropDownButton.js

define([
        "dojo/_base/declare", // declare
        "dojo/_base/lang", // hitch
        "dojo/query", // query
        "../registry", // registry.byNode
        "../popup", // dijit.popup2.hide
        "./Button",
        "../_Container",
        "../_HasDropDown",
        "dojo/text!./templates/DropDownButton.html"
], function(declare, lang, query, registry, popup, Button, _Container, _HasDropDown, template){

        // module:
        //              dijit/form/DropDownButton

        return declare("dijit.form.DropDownButton", [Button, _Container, _HasDropDown], {
                // summary:
                //              A button with a drop down
                //
                // example:
                // |    <button data-dojo-type="dijit/form/DropDownButton">
                // |            Hello world
                // |            <div data-dojo-type="dijit/Menu">...</div>
                // |    </button>
                //
                // example:
                // |    var button1 = new DropDownButton({ label: "hi", dropDown: new dijit.Menu(...) });
                // |    win.body().appendChild(button1);
                //

                baseClass: "dijitDropDownButton",

                templateString: template,

                _fillContent: function(){
                        // Overrides Button._fillContent().
                        //
                        // My inner HTML contains both the button contents and a drop down widget, like
                        // <DropDownButton>  <span>push me</span>  <Menu> ... </Menu> </DropDownButton>
                        // The first node is assumed to be the button content. The widget is the popup.

                        if(this.srcNodeRef){ // programatically created buttons might not define srcNodeRef
                                //FIXME: figure out how to filter out the widget and use all remaining nodes as button
                                //      content, not just nodes[0]
                                var nodes = query("*", this.srcNodeRef);
                                this.inherited(arguments, [nodes[0]]);

                                // save pointer to srcNode so we can grab the drop down widget after it's instantiated
                                this.dropDownContainer = this.srcNodeRef;
                        }
                },

                startup: function(){
                        if(this._started){
                                return;
                        }

                        // the child widget from srcNodeRef is the dropdown widget.  Insert it in the page DOM,
                        // make it invisible, and store a reference to pass to the popup code.
                        if(!this.dropDown && this.dropDownContainer){
                                var dropDownNode = query("[widgetId]", this.dropDownContainer)[0];
                                if(dropDownNode){
                                        this.dropDown = registry.byNode(dropDownNode);
                                }
                                delete this.dropDownContainer;
                        }
                        if(this.dropDown){
                                popup.hide(this.dropDown);
                        }

                        this.inherited(arguments);
                },

                isLoaded: function(){
                        // Returns whether or not we are loaded - if our dropdown has an href,
                        // then we want to check that.
                        var dropDown = this.dropDown;
                        return (!!dropDown && (!dropDown.href || dropDown.isLoaded));
                },

                loadDropDown: function(/*Function*/ callback){
                        // Default implementation assumes that drop down already exists,
                        // but hasn't loaded it's data (ex: ContentPane w/href).
                        // App must override if the drop down is lazy-created.
                        var dropDown = this.dropDown;
                        var handler = dropDown.on("load", lang.hitch(this, function(){
                                handler.remove();
                                callback();
                        }));
                        dropDown.refresh();             // tell it to load
                },

                isFocusable: function(){
                        // Overridden so that focus is handled by the _HasDropDown mixin, not by
                        // the _FormWidget mixin.
                        return this.inherited(arguments) && !this._mouseDown;
                }
        });
});