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






  • 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




  //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?


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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...