Microsoft Office Ribbon (VERY COOL)

**bigice** · 25 Aug 2010 1:07 PM

Hello,
I Have work on (http://www.sencha.com/forum/showthre...ghlight=Ribbon)
Thanks khebs@live.com Ext User for share this links.
So i did some modify and the Ribbon got a PUMP!
screen2.png screen1.png

New:
Title Align: (top / bottom)
Title Event Click
Ribbon by ribbon array config

Sample Usage:

PHP Code:


new Ext.ux.Ribbon({
        renderTo : Ext.getBody(),
        activeTab : 0,
        items : [{
            title : 'Home',
            ribbon : [{
                title : 'Clipboard',
                cfg : {
                    columns : 2,
                    defaults : {
                        width : 60
                    }
                },
                items : [{
                    text : 'Paste',
                    iconCls : "paste-icon",
                    rowspan : 3,
                    width : 50,
                    height : 70
                },{
                    text : 'Edit',
                    iconCls : 'pencil-icon',
                    scale : 'small',
                    iconAlign : 'left'
                },{
                    text : 'Copy',
                    scale : 'small',
                    iconCls : 'copy-icon',
                    iconAlign : 'left'
                },{
                    text    : "Cut",
                    iconCls : "cut-icon",
                    scale : 'small',
                    iconAlign : 'left'
                }]
            },{
                title : 'Records',
                cfg : {
                    defaults : {
                        width : 60
                    }
                },
                items : [{
                    text : 'Simple Add',
                    iconCls : 'add-icon'
                },{
                    text : 'Complex Add',
                    iconCls : 'add2-icon'
                },{
                    text : 'Grid Search',
                    iconCls : 'book-icon'
                }]
            },{
                title : 'Database',
                cfg : {
                    columns: 3,
                    defaults: {
                        allowDepress : true,
                        enableToggle : true,
                        toggleGroup : 'tg-ribbon'
                    }
                },
                items : [{
                    text : 'Scheme Branch',
                    iconCls : 'branch1-icon',
                    rowspan : 3,
                    pressed : true
                },{
                    text : 'Table Element',
                    iconCls : 'branch2-icon',
                    rowspan : 3
                },{
                    text : 'Create a new table',
                    iconCls : 't1-icon',
                    scale : 'small',
                    iconAlign : 'left'
                },{
                    text : 'Connect an existing table',
                    iconCls : 't2-icon',
                    scale : 'small',
                    iconAlign : 'left'
                },{
                    text : 'Delete an existing table',
                    iconCls : 't3-icon',
                    scale : 'small',
                    iconAlign : 'left'
                }]
            }]
        },{
            title : 'Office Sample',
            ribbon : [{
                title : '<blink>Click me</blink>',
                onTitleClick : function(){
                    Ext.Msg.alert('Yes','You have been clicked on ribbon title.');
                },
                items :[{
                    text : 'Connect',
                    iconCls : 'db1-icon',
                    arrowAlign : 'bottom',
                    menu : [{
                        text : 'Option1',
                        iconCls : 't1-icon'
                    }]
                },{
                    text : 'Select',
                    iconCls : 'db2-icon',
                    arrowAlign : 'bottom',
                    menu : [{
                        text : 'Option1',
                        iconCls : 't2-icon'
                    }]
                }]
            },{
                title : 'Title on Top',
                topTitle : true,
                cfg : {
                    columns : 2
                },
                items : [{
                    text : 'Personal Info',
                    iconCls : 'spy-icon',
                    rowspan : 3,
                    style : 'padding-right:5px'
                },{
                    xtype : 'textfield',
                    anchor : '100%',
                    emptyText : 'Display text'
                },{
                    xtype : 'textfield',
                    anchor : '100%',
                    emptyText : 'Display text'
                },{
                    text : "Work Exp. & Others",
                    iconCls : "pencil-icon",
                    scale : "small",
                    iconAlign : "left"
                }]
            },{
                title : 'Only icons',
                cfg : {
                    columns : 3,
                    defaults : {
                        height : 25,
                        scale : 'small',
                        iconAlign : 'left'
                    }
                },
                items :[{
                    text : '',
                    iconCls : 'pencil-icon'
                },{
                    text : '',
                    iconCls : 't1-icon'
                },{
                    text : '',
                    iconCls : 'pencil-icon'
                },{
                    text : '',
                    iconCls : 't1-icon'
                },{
                    text : '',
                    iconCls : 'pencil-icon'
                },{
                    text : '',
                    iconCls : 't1-icon'
                },{
                    text : '',
                    iconCls : 'pencil-icon'
                },{
                    text : '',
                    iconCls : 't1-icon'
                },{
                    text : '',
                    iconCls : 'pencil-icon'
                }]
            },{
                title : 'Form components',
                topTitle : true,
                cfg : {
                    columns : 2
                },
                items : [{
                    text : 'JAR Preferences',
                    iconCls : 'jar-icon',
                    rowspan : 3,
                    style : 'padding-right:5px'
                },{
                    xtype : 'checkbox',
                    anchor : '100%',
                    boxLabel : 'This is a checkbox'
                },{
                    xtype : 'radio',
                    anchor : '100%',
                    name : 'radion1',
                    boxLabel : 'This a radio option1'
                },{
                    xtype : 'radio',
                    anchor : '100%',
                    name : 'radion1',
                    boxLabel : 'This a radio option2'
                }]
            }]
        }]

**Oliven** · 27 Aug 2010 4:59 AM

Very cool. With so many are today working with Microsoft Office 2007/2010 and is accustomed to this kind of toolbar (Ribbon) so the function is very useful. Thanks

**Oliven** · 27 Aug 2010 5:30 AM

Is it possible to "minimize the Ribbon" that you can do in Word 2007 for example

**paffinito** · 27 Aug 2010 1:02 PM

Very nice plugin!!!

i suggest one little addition to prevent the group title to be selected :

Code:

cls : "x-btn-group-ribbonstyle", --> cls : "x-btn-group-ribbonstyle x-unselectable",

CSS

Code:

.x-btn-group-ribbonstyle .x-btn-group-header {
    /*font-size: 10px !important;*/
    cursor: default; /* Addition */
}

**paffinito** · 27 Aug 2010 2:14 PM

Not work with internet explorer.

Error line 4273 in ext-all-debug.js

Thanks for your help

**dayudong** · 28 Aug 2010 5:58 AM

It's very cool, but not work in IE8.
BTW, how to add menu or menu items dynamically?
Thanks.

**moegal** · 28 Aug 2010 8:13 AM

This is really cool. Is there anyway to do it without special graphics? Can it use existing graphics?

Marty

**bigice** · 28 Aug 2010 8:14 AM

First place: I hate IE its worst existing browser on earth.
Everythings works well on Firefox, Chrome and until Safari But just on Internet Explorer does not works.. its really crazy!!!

I did some change on code for work on I.E but im not expert in CSS and Webdesigner so we need help to fix this. But here below is the idea that works in I.E

OH i did some change that u can minimize (show/hide) the Ribbon. here is the code:
Change the constructor method from the Ribbon.js file

PHP Code:


constructor : function(config){
        this.titleId = new Array();
        
        Ext.apply(config, {
            baseCls: "x-plain ui-ribbon",
            margins: "3 0 0 0",
            plugins: new Ext.ux.TabScrollerMenu({
                maxText  : 15,
                pageSize : 5
            }),
            enableTabScroll : true,
            plain: true,
            border: false,
            deferredRender : false,
            layoutOnTabChange : true,
            title : '&nbsp;',
            collapsible : true, 
            listeners : {
                beforetabchange : function(tp, ntb, ctb){
                    tp.expand();
                },
                afterrender : {
                    scope : this,
                    fn : function(){
                        if(this.titleId.length > 0){
                            for(var key = 0; key < this.titleId.length;  key++){
                                r = Ext.get(this.titleId[key].id);
                                if(r)
                                    r.on('click', this.titleId[key].fn);
                            }
                        }
                    }
                }
            }
        });
        
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        
        if(config.items){
            for(var i = 0; i < config.items.length; i++)
                this.initRibbon(config.items[i], i);
        }
        
        Ext.ux.Ribbon.superclass.constructor.apply(this, arguments);
    }

**paffinito** · 28 Aug 2010 11:03 PM

Hi bigice,

i have solved whit this changes:

initRibbon:

Code:

footerCfg: {
  cls : "x-btn-group-header x-unselectable",  <-- if you want
  tag : "span",  <-- important
  html : title
}

css
[change]

Code:

.x-btn-group-ribbonstyle .x-btn-group-bc {
    background-image: url(../images/ribbon-group-bt.gif);
    text-align: center;
    vertical-align: top;
    padding: 2px 2px 4px 2px;  <-- little change
}
.ui-ribbon .x-btn-text {
    /*max-width     : 60px;
    text-overflow : ellipsis;*/
    text-align    : center;
    width         : 100%;
    display       : block;
    /*overflow      : hidden !important;*/ <-- comment this... it's the problem
    white-space   : normal !important;
}

[add this to fix some problem with IE]

Code:

.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns.x-panel-btns-right .x-clear {
    font:                0 sans-serif;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left {
    text-align:            center;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-tc {
    vertical-align:        top;
}

I have see the collapsable button have a CSS problem with FF therefore i have set it to false.

Bye

**jackpan** · 17 Sep 2010 4:23 AM

Hi paffinito,

Can you post a zip file with your fix for IE?

Thanks!

Microsoft Office Ribbon (VERY COOL)

Thread Tools

Search Thread

Display

Microsoft Office Ribbon (VERY COOL)

Microsoft Office Ribbon (VERY COOL)

IE problem

IE problem

IE its a big problema

IE its a big problema

Similar Threads

Microsoft Office style menubar

Problem with Microsoft Office 2003 Web Components

Toolbar like Office 2007 (Ribbon)

ribbon Extension menubar like office 2007

Thoughts on building an MS Office ribbon

Tags for this Thread