Results 1 to 6 of 6

Thread: Hide/show a group of items in an Ext.menu.Menu

  1. #1
    Sencha Premium User
    Join Date
    Apr 2019
    Posts
    9
    Vote Rating
    0
      0  

    Default Answered: Hide/show a group of items in an Ext.menu.Menu

    Hi everyone,

    I would like to know if there is a simple way to hide a group of items in an Ext.menu.Menu

    For example:

    Code:
    Ext.define('main.OptionMenu',{
        extend : 'Ext.menu.Menu',
        xtype : 'app-optionmenu',
        floated: true,
        minWidth: 150,
            reference:'optionMenu',
        items:[
        {
            bind:{text:'{text.home}'},
            group:'tabMenu',
            checked: true,
            hidden: false,
    
    
        },
        {
            bind:{text:'{text.news}'},
            group:'tabMenu',
            checked: false,
            hidden: false,
    
    
        },'-',
        {
            bind:{text:'{text.english}'},
            language:'en',
            checked: Ext.language == 'en',
            group :'language',
            handler: 'onLanguageClick'
        },
        {
            bind:{text:'{text.french}'},
            language:'fr',
            checked: Ext.language == 'fr',
            group :'language',
            handler: 'onLanguageClick'
        },'-',
        {
            hidden: Ext.lastLoginDate == '',
            bind:{text:'{text.lastlogin} '+Ext.lastLoginDate},
        },'-',
        {
            bind:{text:'{text.changepassword}'},
            iconCls: 'x-fa fa-cog',
            handler: 'onChangepasswordClick'
        },'-',
        {
            bind:{text:'{text.logout}'},
            iconCls: 'x-fa fa-sign-out',
            handler: 'onLogoutClick'
        }],
    
    
    
    
    });
    I would like to hide or show the group:'tabMenu' items from my main controller. Is there an easy way to do that?

  2. Just query against your option menu for all items that have the group tabMenu. Then show or hide them.

    Code:
    //Quick example
    var tabMenuItems = Ext.ComponentQuery.query('app-optionmenu')[0].query('[group=tabMenu]');
    
    // now show or hide the items
    //

  3. #2
    Sencha Premium User
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    66
    Answers
    16
    Vote Rating
    12
      0  

    Default

    Just query against your option menu for all items that have the group tabMenu. Then show or hide them.

    Code:
    //Quick example
    var tabMenuItems = Ext.ComponentQuery.query('app-optionmenu')[0].query('[group=tabMenu]');
    
    // now show or hide the items
    //

  4. #3
    Sencha Premium User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    347
    Answers
    2
    Vote Rating
    2
      0  

    Default

    What's wrong with binding the hidden config?

    Code:
    {
    							tooltip: 'Click to see all save options',
    							text: 'Save Options',
    							iconCls: 'x-fa fa-floppy-o miscellaneous',
    							action: 'SAVE',
    							menu: [
    								{
    									tooltip: 'Save the current quote as-is',
    									text: 'Save Quote',
    									action: 'SAVE',
    									iconCls: 'x-fa fa-floppy-o miscellaneous',
    									handler: 'onSaveButtonClick',
    									bind: {
    										hidden: '{disableSave}'
    									}
    								},
    								{
    									tooltip: 'Save a new version of the current quote',
    									text: 'Save New Version',
    									action: 'SAVEVERSION',
    									iconCls: 'x-fa fa-code-fork miscellaneous',
    									handler: 'onSaveButtonClick',
    									bind: {
    										hidden: '{isDraft}'
    									}
    								},							
    								{
    									tooltip: 'Save the current quote and close the tab',
    									text: 'Save & Close',
    									action: 'SAVECLOSE',
    									iconCls: 'x-fa fa-window-close miscellaneous',
    									handler: 'onSaveButtonClick',
    									bind: {
    										hidden: '{disableSave}'
    									}
    								}
    							]
    						},

  5. #4
    Sencha Premium User
    Join Date
    Apr 2019
    Posts
    9
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by Johnny Major View Post
    Just query against your option menu for all items that have the group tabMenu. Then show or hide them.

    Code:
    //Quick example
    var tabMenuItems = Ext.ComponentQuery.query('app-optionmenu')[0].query('[group=tabMenu]');
    
    // now show or hide the items
    //
    Thank you Johny, it worked perfectly.

    Is it possible to use Ext.ComponentQuery.query to get a specific element, using reference keyword?

    for example

    Ext.ComponentQuery.query('app-optionmenu')[0].query('[reference=tabMenu451]')


    @mjhaston: thanks for the reply but I need to change the hidden value several times, not only when the menu is loaded.

  6. #5
    Sencha Premium User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    347
    Answers
    2
    Vote Rating
    2
      0  

    Default

    vm.set('isDraft', false);

    saveas1.png


    vm.set('isDraft', true);

    saveas2.png

  7. #6
    Sencha Premium User
    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    347
    Answers
    2
    Vote Rating
    2
      0  

    Default

    @wtwUser - Just adding, you can really handle the entire button using the viewmodel:

    Code:
    dockedItems: [
    				{
    					dock: 'top',
    					xtype: 'toolbar',
    					items: [
    						{
    							bind: {
    								text: '{createSalesOrderText}',
    								iconCls: '{createSalesOrderIconCls}',
    								tooltip: '{createSalesOrderTooltip}',
    								disabled: '{disableCreateSalesOrderButton}',
    								hidden: '{hideCreateSalesOrderButton}'
    							},
    							handler: 'onCreateSalesOrderBtnClick'
    						},

Posting Permissions

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