1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    13
    Vote Rating
    0
    Hari1611 is on a distinguished road

      0  

    Question Answered: Ext 4 Treepanel context menu not showing at target

    Answered: Ext 4 Treepanel context menu not showing at target


    Ext 4 treepanel context menu not showing at the target node.. My code is as below.. Please anybody help me to resolve it.

    var onContextMenu = function (view, record, item, index, e) {
    var selNode = record;
    if (Ext4.getCmp("mainContext") != null) {
    Ext4.getCmp("mainContext").destroy();
    }
    var menu = createContextMenu(selNode);
    e.preventDefault();
    menu.showAt(item);
    }

    var tree = Ext4.create('Ext4.tree.Panel', {
    animate: true,
    enableDD: true,
    id: "filterTree",
    border: false,
    renderTo: self.containerId,
    store: treeStore,
    rootVisible: false,
    layout: {
    type: 'fit',
    padding: '5',
    align: 'left'
    },
    listeners: {
    afterrender: function () {
    this.getEl().setStyle('height', 'auto');
    this.body.setStyle('height', 'auto');
    this.getView().getEl().setStyle('height', 'auto');
    }
    }
    });
    tree.on('itemcontextmenu', onContextMenu);

    Whats wrong with this code??

  2. Please use CODE tags when posting code (# button on the editor toolbar).

    I believe the problem is with your showAt(). See the example here:

    http://docs.sencha.com/ext-js/4-0/#!...-method-showAt

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Please use CODE tags when posting code (# button on the editor toolbar).

    I believe the problem is with your showAt(). See the example here:

    http://docs.sencha.com/ext-js/4-0/#!...-method-showAt

  4. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    13
    Vote Rating
    0
    Hari1611 is on a distinguished road

      0  

    Thumbs up Works fine

    Works fine


    Works fine!
    But i have to render the menu to the body on creation and specify the floating : false

    I need to show the menu on the icon of the tree node, earlier with ext 3.0 it can be done with
    Code:
    menu.show(selectedNode.ui.getIconEl());
    selectedNode.ui.getIconEl() is missing in Ext 4

    How can i do it?? Any suggestion??

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    But i have to render the menu to the body on creation and specify the floating : false
    Why?

    selectedNode.ui.getIconEl() is missing in Ext 4
    Just do a suitable DomQuery down from the item (the third argument of your handler).

    I also think you're going to need showBy() rather than show():

    http://docs.sencha.com/ext-js/4-0/#!...-method-showBy

  6. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    13
    Vote Rating
    0
    Hari1611 is on a distinguished road

      0  

    Question Get Icon Element of the each node in the tree??

    Get Icon Element of the each node in the tree??


    How can i get the icon element of each node in the tree??

    If i didnt specify
    Code:
    floating:false
    then menu will be shown like this

    tree.JPG

    Any idea why is it so?

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    How can i get the icon element of each node in the tree??
    As already mentioned, you need to use a DomQuery. It'd be something like this:

    Code:
    Ext.fly(item).down('.x-tree-icon')
    As for the floating problem, it's difficult to guess what the problem is without seeing the config for your menu. Make sure you don't have a renderTo option.

  8. #7
    Sencha User
    Join Date
    Oct 2010
    Posts
    13
    Vote Rating
    0
    Hari1611 is on a distinguished road

      0  

    Default


    Code:
    var menu = Ext4.create('Ext4.menu.Menu', {
                id: 'mainContext',
                floating: false,
                renderTo: Ext4.getBody(),
                width: 100,
                items: [{ text: 'Create Group',
                    hidden: selNode.isLeaf() ? true : false,
                    id: 'createGroup',
                    handler: function () {
                        
                },
                {
                    hidden: selNode.isLeaf() ? true : false,
                    text: 'Rename Group',
                    id: 'editGroup',
                    handler: function () {
                       
                },
                {
                    hidden: selNode.isLeaf() || selNode.raw.isGroup == 2 ? true : false,
                    text: 'Delete Group',
                    id: 'deleteGroup',
                    handler: function () {
                        
                    }
                },
                {
                    text: 'Create Filter',
                    id: 'createFilter',
                    handler: function () {
                      
                    }
                },
                {
                    hidden: selNode.isLeaf() ? false : true,
                    text: 'Edit Filter',
                    id: 'editFilter',
                    handler: function () {
                     
                    }
                },
                {
                    hidden: selNode.isLeaf() ? false : true,
                    text: 'Delete Filter',
                    id: 'deleteFilter',
                    handler: function () {
                        
                    }
                },
                {
                    hidden: selNode.raw.isGroup == 2 ? false : true,
                    text: 'Cancel filter',
                    id: 'cancelFilter',
                    handler: function () {
                       
                    }
                },
                {
                    hidden: selNode.raw.isGroup == 2 ? false : true,
                    text: 'Refresh Tree',
                    id: 'refreshTree',
                    handler: getData
                }]
            });
    When the highlighted code is removed the menu is not showing any where..

    In between im using ext 4 sandbox for creating the tree..

Thread Participants: 1

Tags for this Thread