Jump to content

Ribbon Menu


Recommended Posts

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

post-399-0-74114700-1430935610_thumb.png

post-399-0-48441100-1430935619_thumb.png

  • Like 1
  • Upvote 7
Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...
  • 1 month later...

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 5 years later...
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?

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...