All geek questions in one place

How to bind (bind) dijit.Menu to specific dijit.Tree nodes

I was able to associate a simple dijit.Menu with two MenuItems with dijit.Tree nodes with Menu.bindDomNode (Tree.domNode), but I would like to clarify which nodes get the context menu, and I have a problem getting domNodes from tree elements for menu binding . I hope there is a much easier way to do this?

    datStore = this.DataStore;

    mdl = this.Model;

    tree = this.Tree;

    datStore.fetch({

        query: { nodeType: "ROOT" },
        onItem: function(item, request) {

            dojo.forEach(datStore.getValues(item, "children"), function(childItem) {

  var itemNode = tree.getNodesByItem(mdl.getIdentity(childItem));

  console.log(itemNode): //returns the widget, and the widget has a domNode property that seems ok with firebug traversing of the itemNode object, though the div value is 'dimmed' in firebug (not valid node yet in the DOM?)

                console.log(itemNode.domNode);//returns 'undefined', so the binding below does not work

                if (childItem.nodeType == "MATCHED_VALUE") {

                   Menu.bindDomNode(itemNode.domNode);

                }

            });
        }
    });
+3
source share
5 answers

You can also use the onFocus event for this menu if you don't like using pseudo-private methods such as "_openMyself". You must right-click on the currently selected node.

var tree = new dijit.Tree({
    onMouseDown:function(ev,node){
        if(ev.button==2){ // right-click
            var here=dijit.getEnclosingWidget(ev.target);
            this.set('selectedNode',here);
        }
    }
});
var menuItem=new dijit.MenuItem({...});
var myMenu = new dijit.Menu({
    onFocus:function(){
        var selected=tree.selectedItem;
        // do stuff here like:
        menuItem.attr('disabled',(selected.children)?true:false);
    }
});
myMenu.addChild(menuItem);
myMenu.bindDomNode(tree.domNode);

, , - Dojo. , 2 .

+7

. node, Menu._openMyself(). test_Tree.html:

dojo.connect(menu, "_openMyself", this, function(e){
// get a hold of, and log out, the tree node that was the source of this open event
var tn = dijit.getEnclosingWidget(e.target);
console.debug(tn);

// now inspect the data store item that backs the tree node:
console.debug(tn.item);

// contrived condition: if this tree node doesn't have any children, disable all of the menu items
dojo.forEach(menu.getChildren(), function(i){ i.set('disabled', !tn.item.children); });

// IMPLEMENT CUSTOM MENU BEHAVIOR HERE
});

, , .

+1

, :

itemNode.domNode

how `itemNode 'is an array, according to the documentation: http://dojotoolkit.org/api/1.6/dijit.Tree/getNodesByItem

usage: itemNode [0] .domNode

+1
source

Below code shows the onclick menu of the node tree

<!DOCTYPE html>
<html >
<head>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css" />    
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/tundra/tundra.css" />
 <script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>

<script>require(["dojo/parser", "dojo/store/Memory", "dijit/Menu", "dijit/MenuItem", "dijit/tree/ObjectStoreModel", "dijit/Tree"]);</script>
<script type="text/javascript">
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require( "dijit.Tree" );
    dojo.require("dijit.Menu");
    dojo.require("dijit.MenuItem");
    dojo.require("dijit.tree.ForestStoreModel");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");

    var rawdata = [ {
        label: 'Vegetables',
        id: '1',
        children:  [ { label: 'tomato', id: '1.1' }, { label: 'onion', id: '1.2' } ]
    }, {
        label: 'Fruits',
        id: '2',
        children: [
            { id: '2.1', label: 'Apple' },           
            { id: '2.3', label: 'Grapes' }
        ]
    } ];

    function prepare(){
        var store = new dojo.data.ItemFileReadStore({
            data: { identifier: 'id', label : 'label', items: rawdata }
        });
        var treeModel = new dijit.tree.ForestStoreModel({ store: store });
        var treeControl = new dijit.Tree({
            model: treeModel,
            showRoot: false,
            _createTreeNode: function(/*Object*/ args){
                var tnode = new dijit._TreeNode(args);
                tnode.labelNode.innerHTML = args.label;
                return tnode;
            }
        }, "treeOne" );

        var AllMenu = new dijit.Menu({ style: "display: none;"});
        var menuItem1 = new dijit.MenuItem({
               label: "Add Instance",
               iconClass:"",
               style:"background-color:#4B57FA",
               onClick: function(){ alert('started'); }
           });
        AllMenu.addChild(menuItem1);
        AllMenu.bindDomNode(treeControl.domNode);

    }


    dojo.ready(prepare);
</script>


</head>
<body class="claro">
    <div id="treeOne">  </div>


</body>
</html>
0
source

Source: https://habr.com/ru/post/1753947/

More articles:


All Articles