1. #1
    Sencha User khebs@live.com's Avatar
    Join Date
    Mar 2008
    Posts
    83
    Vote Rating
    0
    khebs@live.com is on a distinguished road

      0  

    Default Simple Ribbon UX

    Simple Ribbon UX


    This is a simple UX Ribbon im working on. Kinda neat.



    Code:
    // @import
    Import("Ext.ux.css.TabScrollerMenu");
    Import("Ext.ux.TabScrollerMenu");
    
    // @namespace
    Namespace("Application.ux.Ribbon");
    
    /**
     * Class
     */
    Application.ux.Ribbon = Ext.extend(Ext.TabPanel, {
        /**
         * Constructor
         */    
        constructor: function(config) {
            
            var scrollerMenu = new Ext.ux.TabScrollerMenu({
        		maxText  : 15,
        		pageSize : 5
        	});
    	
            config = config || {};
    		config = Ext.apply(config || {}, {
                bodyStyle: "background: transparent !important;",
                baseCls: "x-plain ui-ribbon",
                margins: "3 0 0 0",
                plugins: [ scrollerMenu ],
                enableTabScroll : true,
                plain: true,
                border: false,
    		});
    
    		Application.ux.Ribbon.superclass.constructor.apply(this, arguments);
    	},
    
        /**
         * addRibbon
         *
         * @access  public
         * @param   string
         * @param   integer (Optional)
         */
        addRibbon: function(title, id, index) {
            // Config
            var rbn = {
                title: title,
                id: (id || Ext.id()),
                xtype: "panel",
                baseCls: "x-plain",
                tbar: new Ext.Toolbar({ }),
    
                addGroup: function(title, items, c) {
                    // Get Ribbon Toolbar
                    var tb = this.getTopToolbar();
                    // Loop each, check for space and replace space to <br/>
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].scale !== "small") {
                            // If space is not found, add cls
                            if (String(items[i].text).indexOf(" ") == -1) items[i].cls = "x-btn-as-arrow";
                            // If space is found, break it.
                            items[i].text = String(items[i].text).replace(/[ +]/gi, "<br/>");
                        }
                    }
                    
                    c = c || {};
                    
                    // Return Obj
                    return tb.add(Ext.applyIf(c, {
                        xtype: "buttongroup",
                        cls: "x-btn-group-ribbonstyle",
                        
                        defaults: Ext.applyIf(c.defaults || {}, {
                            scale: "large",
                            iconAlign: "top",
                            minWidth: 40
                        }),
                        
                        footerCfg: {
                            cls: "x-btn-group-header",
                            tag: "tag",
                            html: title
                        },
    
                        items: items
                    }));
                }
            };
            
            // Add Ribbon by index or add directly
            if (System.isDefined(index) && index === false) {
                return this.insert(index, rbn);
            } else {
                return this.add(rbn);
            }
        }
    });
    Sample:

    Code:
    ...
    // @private
        var createRibbonMenu = function() {
            // Check if Ribbon already exists
            if (!UIRibbon.findById(ribbonID)) {
                // Add Ribbon Tab
                ribbonMenu = UIRibbon.addRibbon("New Employee", ribbonID);
                
                // Add Actino Group
                ribbonMenu.addGroup("Actions", [{
                    text    : "Save",
                    iconCls : "icon-pds32-save",
                    handler : function(){ alert(Ext.encode(Sheets.Container.getForm().getFieldValues())); }
                },{
                    text    : "Delete",
                    iconCls : "icon-pds32-delete"
                },{
                    text    : "Save&nbsp;& New",
                    iconCls : "icon-pds32-savenew"
                },{
                    text    : "Save&nbsp;& Close",
                    iconCls : "icon-pds32-saveclose"
                }]);
                
                // Add Show Group
                ribbonMenu.addGroup("Show", [{
                    text        : "Personal Info",
                    iconCls     : "icon-pds32-card",
                    rowspan     : 3,
                    pressed     : true,
                    handler     : showGeneralSheet
                },{
                    text        : "Family&nbsp;& Education",
                    iconCls     : "icon-pds32-details",
                    rowspan     : 3,
                    handler     : showDetailSheet
                },{
                    text        : "Civil Service Eligibility",
                    iconCls     : "icon-pds16-attributes",
                    scale       : "small",
                    iconAlign   : "left"
                },{
                    text        : "Work Exp. & Others",
                    iconCls     : "icon-pds16-cv",
                    scale       : "small",
                    iconAlign   : "left"
                },{
                    text        : "Archived Documents",
                    iconCls     : "icon-pds16-archives",
                    scale       : "small",
                    iconAlign   : "left"
                }], {
                    columns: 3,
                    defaults: {
                        allowDepress : true,
                        enableToggle : true,
                        toggleGroup  : "pds-show-display"
                    }
                });
                
                // Add Options Group
                ribbonMenu.addGroup("Options", [{
                    text        : "Forms",
                    iconCls     : "icon-pds32-card2",
                    arrowAlign  : "bottom",
                    menu        : []
                },{
                    text        : "Picture",
                    iconCls     : "icon-pds32-picture",
                    arrowAlign  : "bottom",
                    menu        : [{ text: "Add Picture..." }]
                }]);
                
                // Add Close Group
                ribbonMenu.addGroup("Close", [{
                    text    : "Cancel",
                    iconCls : "icon-pds32-close",
                    handler : function(){ closeSheets(); UIRibbon.remove(ribbonID); }
                }]);
            }
            // Activate Ribbon
            UIRibbon.setActiveTab(ribbonID);
        };
    ...
    CSS

    Code:
    /* Ribbon
        ...
        xtype: 'buttongroup',
        cls: 'x-btn-group-ribbonstyle',
        footerCfg: {
            cls: "x-btn-group-header",
            tag: "span",
            html: "My ButtonGroup"
        }
        ...
    */
    .x-btn-group-ribbonstyle .x-btn-group-bc {
        /* Set this path to your environment! */
        background-image: url(group-bt.gif);
        text-align: center;
        vertical-align: top;
        padding: 2px 2px 5px 2px;
    }
    
    .x-btn-group-ribbonstyle .x-btn-group-header {
        /*font-size: 10px !important;*/
    }
    
    .ui-ribbon .x-tab-strip-spacer {
        border: 0px;
        display: none;
    }
    
    .ui-ribbon .x-toolbar {
        background-image: url(app://Ext/resources/images/default/toolbar/bg2.gif);
    }
    
    .ui-ribbon .x-tab-strip-top .x-tab-right,
    .ui-ribbon .x-tab-strip-top .x-tab-left,
    .ui-ribbon .x-tab-strip-top .x-tab-strip-inner {
        background-image: url(app://Ext/resources/images/default/tabs/tabs-sprite2.gif);
    }
    
    .ui-ribbon .x-tab-strip-text {
        padding-left: 7px;
        padding-right: 7px;
        padding-top: 10px;
        font-weight: normal !important;
    }
    
    .ui-ribbon ul.x-tab-strip-top,
    .ui-ribbon .x-panel-noborder .x-panel-tbar-noborder .x-toolbar {
        border-bottom-color: #a9bfd3;
    }
    
    .ui-ribbon .x-tab-strip span.x-tab-strip-text,
    .ui-ribbon .x-tab-strip-active span.x-tab-strip-text {
        color: #1e395b;
    }
    
    .ui-ribbon .x-toolbar-ct {
        padding: 0px !important;
    }
    
    .ui-ribbon .x-btn-text {
        /*max-width     : 60px;
        text-overflow : ellipsis;*/
        text-align    : center;
        width         : 100%;
        display       : block;
        overflow      : hidden !important;
        white-space   : normal !important;
    }
    
    .ui-ribbon .x-btn-as-arrow .x-btn-mc em {
        /*display:block;
        background-color:transparent;*/
    	padding-bottom: 13px;
    }
    
    .ui-ribbon .x-btn-group-mc {
        padding-bottom: 2px;
    }
    case:

    Code:
    .------------------------------.
    |<Ext.Viewport border>         |
    | .--------------------------. |
    | | <Ux.Ribbon north>        | |
    | |--------------------------| |
    | | <Ext.Panel card center>  | |
    | |                          | |
    | |                          | |
    | |                          | |
    | |                          | |
    | |                          | |
    | `--------------------------` |
    `------------------------------`
    > Please remove the Import functions and use <script> instead
    > Namespace change Ext.ns
    > This is just an experiment ux
    > Some css fixes is here in the forum (See Similar Threads Below)
    Attached Files

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    7
    Vote Rating
    0
    ostenieverson is on a distinguished road

      0  

    Default


    This is very nice. Thank you!

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    47
    Vote Rating
    0
    dan_b is on a distinguished road

      0  

    Default


    Looks great, can't wait to play with this.

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

      0  

    Default


    looks great, seems like that should included as standard.

    Marty

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    7
    Vote Rating
    0
    ukara is on a distinguished road

      0  

    Default


    Looks great. I need working example.

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

      0  
    Mateus Medeiros
    Sao Paulo - Brazil

  7. #7
    Ext User
    Join Date
    Apr 2010
    Posts
    2
    Vote Rating
    0
    dantrevino is on a distinguished road

      0  

    Default very nice

    very nice


    looks great.

  8. #8
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    7
    DavidThi808 is on a distinguished road

      0  

    Default


    For those looking for this, I've just uploaded one that updates this to run well on ExtJS 4. Details are here.

    thanks - dave

Similar Threads

  1. Real Ribbon ButtonGroup
    By curlybracket in forum Community Discussion
    Replies: 14
    Last Post: 14 Nov 2013, 10:45 AM
  2. Toolbar like Office 2007 (Ribbon)
    By kimmaydesign in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 18 Aug 2009, 8:22 AM
  3. 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: 7