Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2008
    Location
    Brazil
    Posts
    34
    Vote Rating
    0
    bigice is on a distinguished road

      0  

    Thumbs up Microsoft Office Ribbon (VERY COOL)

    Microsoft Office Ribbon (VERY COOL)


    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.pngscreen1.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 : {
                        
    columns3,
                        
    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'
                    
    }]
                }]
            }] 
    Attached Files
    Mateus Medeiros
    Sao Paulo - Brazil

  2. #2
    Sencha User
    Join Date
    Mar 2009
    Posts
    6
    Vote Rating
    0
    Oliven is on a distinguished road

      0  

    Default


    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

  3. #3
    Ext User
    Join Date
    Jan 2011
    Posts
    1
    Vote Rating
    0
    aljone4579 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Oliven View Post
    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

    Yes I agree too that this very useful information and cool in using this toolbar...





    ______________________________________________

    formica laminate

  4. #4
    Sencha User paffinito's Avatar
    Join Date
    Oct 2009
    Location
    Italy
    Posts
    14
    Vote Rating
    1
    paffinito is on a distinguished road

      0  

    Post Update

    Update


    I have changed initRibbon to use '->', '-' and ' ' as a normal toolbar.

    Code:
    initRibbon: function(item, index) {
            var tbarr = new Array();
            for (var j = 0; j < item.ribbon.length; j++) {
                if (item.ribbon[j] == '->') {
                    tbarr.push(new Ext.Toolbar.Fill());
                } else if (item.ribbon[j] == '-') {
                    tbarr.push(new Ext.Toolbar.Separator());
                } else if (item.ribbon[j] == ' ') {
                    tbarr.push(new Ext.Toolbar.Spacer());
                } else {
                    for (var i = 0; i < item.ribbon[j].items.length; i++) {
                        if (item.ribbon[j].items[i].scale !== "small") {
                            item.ribbon[j].items[i].text = String(item.ribbon[j].items[i].text).replace(/[ +]/gi, "<br/>");
                        }
                    }
                    c = {
                        xtype: "buttongroup",
                        cls: "x-btn-group-ribbonstyle",
                        defaults: {
                            scale: "large",
                            iconAlign: "top",
                            minWidth: 40
                        },
                        items: item.ribbon[j].items
                    };
    
                    title = item.ribbon[j].title || 'Ribbon Title';
                    topTitle = item.ribbon[j].topTitle || false;
                    onTitleClick = item.ribbon[j].onTitleClick || false;
    
                    if (onTitleClick) {
                        titleId = 'ux-ribbon-' + Ext.id();
                        title = '<span id="' + titleId + '" style="cursor:pointer;">' + title + '</span>';
                        this.titleId.push({
                            id: titleId,
                            fn: onTitleClick
                        });
                    }
    
                    if (!topTitle) {
                        Ext.apply(c, {
                            footerCfg: {
                                cls: "x-btn-group-header",
                                tag: "span",
                                html: title
                            }
                        });
                    } else {
                        Ext.apply(c, {
                            title: title
                        });
                    }
                    cfg = item.ribbon[j].cfg || null;
    
                    if (cfg) {
                        Ext.applyIf(c, item.ribbon[j].cfg);
                        if (cfg.defaults) Ext.apply(c.defaults, cfg.defaults);
                    }
                    tbarr.push(c);
                }
            }
            Ext.apply(item, {
                baseCls: "x-plain",
                tbar: tbarr
            });
        }
    Bye
    Pasquale

  5. #5
    Touch Premium Member
    Join Date
    Sep 2011
    Location
    Vancouver, BC, Canada
    Posts
    26
    Vote Rating
    0
    timmcintyre is on a distinguished road

      0  

    Default


    Hi Guys,

    Thanks for the ribbon code, it looks really cool

    I'm playing around with a ribbon & am wondering, how can I get the last ribbon group in my toolbar to fill to the screen width and get those buttons to align to the right side ? Possible ?

    Cheers

    Tim

  6. #6
    Sencha User
    Join Date
    Mar 2009
    Posts
    6
    Vote Rating
    0
    Oliven is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User paffinito's Avatar
    Join Date
    Oct 2009
    Location
    Italy
    Posts
    14
    Vote Rating
    1
    paffinito is on a distinguished road

      0  

    Default


    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 */
    }

  8. #8
    Sencha User paffinito's Avatar
    Join Date
    Oct 2009
    Location
    Italy
    Posts
    14
    Vote Rating
    1
    paffinito is on a distinguished road

      0  

    Default IE problem

    IE problem


    Not work with internet explorer.

    Error line 4273 in ext-all-debug.js

    Thanks for your help
    Attached Images

  9. #9
    Ext User
    Join Date
    Feb 2009
    Posts
    1
    Vote Rating
    0
    dayudong is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


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

    Marty

Similar Threads

  1. ribbon Extension menubar like office 2007
    By august in forum Ext 1.x: User Extensions and Plugins
    Replies: 3
    Last Post: 14 Nov 2013, 10:48 AM
  2. Microsoft Office style menubar
    By Beer Brother in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 16 May 2010, 11:52 AM
  3. Problem with Microsoft Office 2003 Web Components
    By hezhanfei in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 9 Dec 2009, 10:22 PM
  4. Toolbar like Office 2007 (Ribbon)
    By kimmaydesign in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 18 Aug 2009, 8:22 AM
  5. Thoughts on building an MS Office ribbon
    By SeaSharp in forum Community Discussion
    Replies: 1
    Last Post: 22 Nov 2007, 4:40 AM

Thread Participants: 12

Tags for this Thread