Ribbon Menu

[dieger]

Hello everyone,

I am sharing my version of Ribbon Menu (such as Office) and created from various internet examples with ExtJS 4.

I have received several requests over time and I apologize for not having found the time to build something that could be easily understood (my first version was in ExtJS 3 and created from a complex code, out of uniGUI) .

I hope you enjoy, and be involved in the evolution of this example.
 
 
(This sample was made with Delphi XE7 and uniGUI Pro 0.99.0.1169)

 

 

RibbonMenu.zip

[sobakava]

The screenshots looks great. I'll definitely give it a try. Thanks!

[stiaan]

Awesome! Thanks!

[valadi]

Thanks

[Farshad Mohajeri]

Thank you for sharing this component.

[stiaan]

Great component. and example...thanks!

[delagoutte]

Good job but it don't work with edge. there is the error message : impossible to set the property "CssText" of a null reference or not defined.

 

have you any idea for fix it ?

[Sherzod]

Hi,

 

What version you're using ?!

 

Best regards.

[delagoutte]

delphi XE7

unigui 1200

[delagoutte]

Excuse me.

the error message is NOT on microsoft edge but with Internet explorer 11

[delagoutte]

the block code with problem is

{-----------------------------------------------------------------------------
  Example: Create dynamic CSS content to set button IconCls...
  -----------------------------------------------------------------------------}
  UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_grd   {background-image: url(assets/images/menu/grid.png) !important; width: 100% !important;}'');');
  UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_jar   {background-image: url(assets/images/menu/jar.png)  !important; width: 100% !important;}'');');
  UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_edit  {background-image: url(assets/images/menu/edit.png);  width: 100%;}'');');
  UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_copy  {background-image: url(assets/images/menu/copy.png);  width: 100%;}'');');
  UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_cut   {background-image: url(assets/images/menu/cut.png);   width: 100%;}'');');
  UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_paste {background-image: url(assets/images/menu/paste.png); width: 100%;}'');');

it's seem to be a Extjs Problem :

see ; https://www.sencha.com/forum/showthread.php?281297

 

If anybody could give a solution

[Sherzod]

Try:

 

1.

  //UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_grd   {background-image: url(assets/images/menu/grid.png) !important; width: 100% !important;}'');');
  //UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_jar   {background-image: url(assets/images/menu/jar.png)  !important; width: 100% !important;}'');');
  //UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_edit  {background-image: url(assets/images/menu/edit.png);  width: 100%;}'');');
  //UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_copy  {background-image: url(assets/images/menu/copy.png);  width: 100%;}'');');
  //UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_cut   {background-image: url(assets/images/menu/cut.png);   width: 100%;}'');');
  //UniSession.AddJS('Ext.util.CSS.createStyleSheet(''.ribbon_paste {background-image: url(assets/images/menu/paste.png); width: 100%;}'');');

2. UniServerModule -> CustomCSS add:

.ribbon_grd   {
  background-image: url(assets/images/menu/grid.png) !important; width: 100% !important;
}

.ribbon_jar   {
  background-image: url(assets/images/menu/jar.png)  !important; width: 100% !important;
}

.ribbon_edit  {
  background-image: url(assets/images/menu/edit.png);  width: 100%;
}

.ribbon_copy  {
  background-image: url(assets/images/menu/copy.png);  width: 100%;
}

.ribbon_cut   {
  background-image: url(assets/images/menu/cut.png);   width: 100%;
}

.ribbon_paste {
  background-image: url(assets/images/menu/paste.png); width: 100%;
}

Best regards.

[delagoutte]

it's work.

thanks a lot

[dw40u]

Hi,

For me this no longer works with the current version of unigui. The menu is not displayed correctly. Has anyone tried that?

[Sherzod]

1 hour ago, dw40u said:

For me this no longer works with the current version of unigui. The menu is not displayed correctly. Has anyone tried that?

Hello,

Not the fact that it will work correctly in new versions of ExtJS.

Which edition and build of UniGUI are you using?

[dw40u]

Hi,

now i use the 1.90.0.1539.

 

Here is a pic of the menu

https://ibb.co/vk2X92T (V 1.90.0.1539)

https://ibb.co/w7NbWLg (a old one)

 

[dw40u]

Hi, here is the Zip File...

https://cloud.wee.gmbh/index.php/s/bodPf6CWyqaQEP8

I think it is a problem in the css File...

I am not very familiar with css, maybe someone can help.

 

 

[Sherzod]

On 1/30/2021 at 1:37 AM, dw40u said:

now i use the 1.90.0.1539.

Hello,

Please adjust your forum email address first:

 

[dw40u]

Hi, is now change..