UniPopupMenu 'beforeInit' for customizing

[mhmda]

There is no clientevents (I know this is a menu) but I want to assign a css class to it, how can I do that?

[Sherzod]

Hi Mohammad,

 

You can try to use like this:

type
  TXPopupMenu = class(TUniPopupMenu)

  end;

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with TXPopupMenu(UniPopupMenu1).MenuControl.JSInterface do
  begin
    JSConfig('cls', ['test']);
    JSConfig('bodyCls', ['test1']);
    JSConfig('disabledCls', ['test2']);
    JSConfig('headerOverCls', ['test3']);
    JSConfig('iconCls', ['test4']);
    JSConfig('overCls', ['test5']);
  end;
end;

Best regards.

[mhmda]

Thank you very much...

[GerhardV]

Is there something similar for TUniMainMenu?

[Sherzod]

Hi,

 

Is there something similar for TUniMainMenu?

 

We will try to analyze.

 

Best regards.

[delagoutte]

hello,

If i would do the same thing but for each item of unipopupmenu. how can i do this ?

I would define different iconcls for my item menu

[Point]

hello,

server module -> customCSS:

.apopupmenu .x-menu-item-icon-default{
   font-size: 9px;
}

On MainForm:

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  with TXPopupMenu(UniPopupMenu1).MenuControl.JSInterface do
  begin
    JSConfig('cls', ['apopupmenu']);
  end;
end;

icon size not change for sub menu item. actually what I need is the sub menu icon to be smaller than the menu item. how to?

[Sherzod]

On 8/22/2022 at 6:26 PM, Point said:

icon size not change for sub menu item. actually what I need is the sub menu icon to be smaller than the menu item. how to?

Hello,

Will you use the UniMenuButton?

What type of icon are you using?

[Sherzod]

I think you can also apply the solution from here:

 

[Point]

Quote

Will you use the UniMenuButton?

Yes.

Quote

What type of icon are you using?

Font awesome.

==

i was tried that script like this:

on server module :

.x-myicon-menu .x-menu-item-icon-default{
   font-size: 12px;
}

.x-myicon-submenu .x-menu-item-icon-default{
   top: 9px;
   font-size: 9px;
}

 

on ExtEvents, menu button :

function afterrender(sender, eOpts)
{
    var me=sender;
    var _addCls = function (item) {
        item.forEach(function (_item) {
            _item.addCls('x-myicon-submenu');
            if (_item.menu) {
                _addCls(_item.menu.items.items)
            }
        })
    };
    
    me.addListener('menushow',     
        Ext.defer(function () {
            if (me.menu) {
                _addCls(me.menu.items.items);
            }
        }, 100)
    );
}

 

the problems :

1. this script apply to all menu icon. i need change icon on sub menu only.
2. the sub menu does not appear when the menu button is clicked on second time.

[Sherzod]

I will try to check. Please attach a simple app if possible. 

[Point]

here a test case:

apopupmenu.7z