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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi