Results 1 to 6 of 6

Thread: How to add menu items and set event handler

  1. #1
    Sencha Premium User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    135
    Answers
    2
    Vote Rating
    1
      0  

    Default Answered: How to add menu items and set event handler

    I want to add some menu items dinamically to an Ext.menu.Menu

    My flow is:

    - listen to an event (ok)
    - add menu items in a controller Action (ok)
    - add some event bindings for my menu items that are methods of the same controller ()

    My controller acttion:
    Code:
    onMyPanelExpand: funcion(p, eOpts){
        // one time code
       ++ Ch.firstExpandFiltri;
       if (Ch.firstExpandFiltri == 1){
        
        me = this;
        
        me.getReportMenu().add(
        {
            xtype: 'menuitem',
            itemId: 'meStampa'
        },
        {
            xtype: 'menuitem',
            itemId: 'meFiltroPdf'
        },
        {
            xtype: 'menuitem',
            itemId: 'meFiltroExcel'
        }
        );
       // ok items are added
        
        // Abilito il menu
        me.getReportMenu().setDisabled(false);
        // Ok menu are enabled
    
    
        // try to add refs !!! but  but no autogenerated getter
        me.addRef(
        {
            ref: 'meFiltroPdf',
            selector: '#meFiltroPdf'
        },
        {
            ref: 'meFiltroExcel',
            selector: '#meFiltroExcel'
        },
        {
            ref: 'meStampa',
            selector: '#meStampa'
        }
        );
       
        
        // Try via component query still doesn't work
        p.down('#meFiltroPdf').on({
            'click': Ext.bind(me.stampaReport,me,['pdf','null']),
            scope: me
        });
    
    
        p.down('#meFiltroExcel').on({
            'click': Ext.bind(me.stampaReport,me,['xls','null']),
            scope: me
        });
        
         p.down('#meStampa').on({
            'click': Ext.bind(me.stampaHtml,me),
            scope: me
        });
        
      }
    }

  2. It looks like there is a bug with addRef. It won't accept an object - requires an array of ref config objects instead.
    EXTJSIV-10682


    Code:
    Ext.define('Test.controller.Main', {
        extend: 'Ext.app.Controller',
        refs: [{
            ref: 'ReportsMenu',
            selector: '#reportsMenu'
        }],
        init: function () {
            var me = this;
    
    
            me.control({
                '#addRef': {
                    click: me.addMenuItems
                }
            });
        },
        addMenuItems: function () {
            var me = this,
                reportsMenu = me.getReportsMenu();
    
    
            reportsMenu.add([{
                text: 'Two',
                itemId: 'meStampa'
            }, {
                text: 'Three',
                itemId: 'meFiltroPdf'
            }, {
                text: 'Four',
                itemId: 'meFiltroExcel'
            }]);
    
    
            me.addRef([{
                ref: 'meFiltroPdf',
                selector: '#meFiltroPdf'
            }]);
    
    
            console.log(me.getMeFiltroPdf());
        }
    });
    
    
    
    
    Ext.application({
        name: 'Test',
    
    
        controllers: ['Main'],
      
        launch: function () {
    
    
            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
    
            Ext.widget('button', {
                renderTo: document.body,
                text: 'Add Items / Ref',
                itemId: 'addRef'
            });
    
    
            Ext.widget('menu', {
                renderTo: document.body,
                itemId: 'reportsMenu',
                margin: '10 0 0 0',
                floating: false,
                height: 300,
                width: 200,
                items: [{
                    text: 'One'
                }]
            });
    
    
        }
    });

  3. #2
    Sencha User
    Join Date
    May 2012
    Location
    Blumenau - Brazil
    Posts
    50
    Answers
    12
    Vote Rating
    8
      0  

    Default

    What happen if you use me.getReportMenu().down() instead of p.down()?
    --
    Jlio Csar Batista - blog - twitter
    Web Developer

  4. #3
    Sencha Premium User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    135
    Answers
    2
    Vote Rating
    1
      0  

    Default

    Now works, problem is that works so:

    Code:
        // Add events
        me.getReportMenu().down('#meFiltroPdf').on({
            'click': Ext.bind(me.stampaReport,me,['pdf','null']),
            scope: me
        });
    
    
        p.down('#meFiltroExcel').on({
            'click': Ext.bind(me.stampaReport,me,['xls','null']),
            scope: me
        });
    It works with both, also with p.down....

    Maybe the problem was that me.getReportMenu().add(); not still rendered my buttons when I try to add listeners?

  5. #4
    Sencha Premium User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    135
    Answers
    2
    Vote Rating
    1
      0  

    Default

    And why I can't add a ref and use the getter:

    Code:
    me.getReportMenu().add(
        {
            xtype: 'menuitem',
            itemId: 'meFiltroPdf',
            icon: 'images/icons/acrobat.png',
            text: 'PDF Report'
        }
        );
    
    me.addRef(
        {
            ref: 'meFiltroPdf',
            selector: '#meFiltroPdf'
        }
        );
      
        // event that works
        /*
        me.getReportMenu().down('#meFiltroPdf').on({
            'click': Ext.bind(me.stampaReport,me,['pdf','null']),
            scope: me
        });
        */
        
        // the follow doesn't work
        console.log(me.getMeFiltroPdf());
        console.log(me);
        me.getMeFiltroPdf().on({
            'click': Ext.bind(me.stampaReport,me,['pdf','null']),
            scope: me
        });

  6. #5
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505
    Vote Rating
    255
      0  

    Default

    It looks like there is a bug with addRef. It won't accept an object - requires an array of ref config objects instead.
    EXTJSIV-10682


    Code:
    Ext.define('Test.controller.Main', {
        extend: 'Ext.app.Controller',
        refs: [{
            ref: 'ReportsMenu',
            selector: '#reportsMenu'
        }],
        init: function () {
            var me = this;
    
    
            me.control({
                '#addRef': {
                    click: me.addMenuItems
                }
            });
        },
        addMenuItems: function () {
            var me = this,
                reportsMenu = me.getReportsMenu();
    
    
            reportsMenu.add([{
                text: 'Two',
                itemId: 'meStampa'
            }, {
                text: 'Three',
                itemId: 'meFiltroPdf'
            }, {
                text: 'Four',
                itemId: 'meFiltroExcel'
            }]);
    
    
            me.addRef([{
                ref: 'meFiltroPdf',
                selector: '#meFiltroPdf'
            }]);
    
    
            console.log(me.getMeFiltroPdf());
        }
    });
    
    
    
    
    Ext.application({
        name: 'Test',
    
    
        controllers: ['Main'],
      
        launch: function () {
    
    
            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
    
    
            Ext.widget('button', {
                renderTo: document.body,
                text: 'Add Items / Ref',
                itemId: 'addRef'
            });
    
    
            Ext.widget('menu', {
                renderTo: document.body,
                itemId: 'reportsMenu',
                margin: '10 0 0 0',
                floating: false,
                height: 300,
                width: 200,
                items: [{
                    text: 'One'
                }]
            });
    
    
        }
    });

  7. #6
    Sencha Premium User filippo.ferrari's Avatar
    Join Date
    Apr 2010
    Location
    Sanremo - Italy
    Posts
    135
    Answers
    2
    Vote Rating
    1
      0  

    Default

    Perfect with the array in config.

    Thanks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •