Simple Ribbon UX

[khebs@live.com]

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]

This is very nice. Thank you!

[dan_b]

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

[moegal]

looks great, seems like that should included as standard.

Marty

[ukara]

Looks great. I need working example.

[bigice]

Please look this http://www.sencha.com/forum/showthread.php?108130-Microsoft-Office-Ribbon-%28VERY-COOL%29

[dantrevino]

looks great.