Page 1 of 2 12 LastLast
Results 1 to 10 of 24

Thread: Microsoft Office Ribbon (VERY COOL)

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Sep 2008
    Location
    Brazil
    Posts
    34
    Vote Rating
    0
      0  

    Thumbs up 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 Attached Files
    Mateus Medeiros
    Sao Paulo - Brazil

  2. #2
    Sencha Premium Member
    Join Date
    Mar 2009
    Posts
    6
    Vote Rating
    0
      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
      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
      0  

    Post 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
      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 Premium Member
    Join Date
    Mar 2009
    Posts
    6
    Vote Rating
    0
      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
      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
      0  

    Default IE problem

    Not work with internet explorer.

    Error line 4273 in ext-all-debug.js

    Thanks for your help
    Attached Images Attached Images

  9. #9
    Ext User
    Join Date
    Feb 2009
    Posts
    1
    Vote Rating
    0
      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
      0  

    Default

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

    Marty

Page 1 of 2 12 LastLast

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •