PDA

View Full Version : Simple Ribbon UX



khebs@live.com
6 Aug 2010, 1:10 AM
This is a simple UX Ribbon im working on. Kinda neat.

http://dl.dropbox.com/u/2342057/ext-js-ribbon4.png



// @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:



...
// @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



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



.------------------------------.
|<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)

ostenieverson
6 Aug 2010, 6:42 AM
This is very nice. Thank you!

dan_b
6 Aug 2010, 6:55 AM
Looks great, can't wait to play with this.

moegal
6 Aug 2010, 9:31 AM
looks great, seems like that should included as standard.

Marty

ukara
7 Aug 2010, 8:59 AM
Looks great. I need working example.

bigice
28 Aug 2010, 8:19 AM
Please look this http://www.sencha.com/forum/showthread.php?108130-Microsoft-Office-Ribbon-%28VERY-COOL%29

dantrevino
28 Aug 2010, 9:46 AM
looks great.

DavidThi808
14 Nov 2013, 10:46 AM
For those looking for this, I've just uploaded one that updates this to run well on ExtJS 4. Details are here. (http://www.sencha.com/forum/showthread.php?276025-Office-style-ribbon-menu&p=1011247)

thanks - dave

Plantface
1 Feb 2016, 1:55 AM
Is this still up-to-date or will it still work with the current Sencha versions (ExtJS 6)? This Ribbon example is a the make/break point for us to choose for Sencha or the excellent RibbonJS.

DavidThi808
1 Feb 2016, 5:15 AM
Is this still up-to-date or will it still work with the current Sencha versions (ExtJS 6)? This Ribbon example is a the make/break point for us to choose for Sencha or the excellent RibbonJS.

Use RibbonJS. Sencha is not supporting what's needed for the ribbon and we hit limits on how close we can get.

sorry - dave