PDA

View Full Version : Microsoft Office Ribbon (VERY COOL)



bigice
25 Aug 2010, 1:07 PM
Hello,
I Have work on (http://www.sencha.com/forum/showthread.php?106388-Simple-Ribbon-UX&highlight=Ribbon)
Thanks khebs@live.com (http://www.sencha.com/forum/member.php?29088-khebs-live.com) Ext User for share this links.
So i did some modify and the Ribbon got a PUMP!
2212922130

New:
Title Align: (top / bottom)
Title Event Click
Ribbon by ribbon array config

Sample Usage:


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 : {
columns: 3,
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'
}]
}]
}]

Oliven
27 Aug 2010, 4:59 AM
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

Oliven
27 Aug 2010, 5:30 AM
Is it possible to "minimize the Ribbon" that you can do in Word 2007 for example

paffinito
27 Aug 2010, 1:02 PM
Very nice plugin!!!

i suggest one little addition to prevent the group title to be selected :



cls : "x-btn-group-ribbonstyle", --> cls : "x-btn-group-ribbonstyle x-unselectable",
CSS


.x-btn-group-ribbonstyle .x-btn-group-header {
/*font-size: 10px !important;*/
cursor: default; /* Addition */
}

paffinito
27 Aug 2010, 2:14 PM
Not work with internet explorer.

Error line 4273 in ext-all-debug.js

Thanks for your help

dayudong
28 Aug 2010, 5:58 AM
It's very cool, but not work in IE8.
BTW, how to add menu or menu items dynamically?
Thanks.

moegal
28 Aug 2010, 8:13 AM
This is really cool. Is there anyway to do it without special graphics? Can it use existing graphics?

Marty

bigice
28 Aug 2010, 8:14 AM
First place: I hate IE its worst existing browser on earth.
Everythings works well on Firefox, Chrome and until Safari But just on Internet Explorer does not works.. its really crazy!!!

I did some change on code for work on I.E but im not expert in CSS and Webdesigner so we need help to fix this. But here below is the idea that works in I.E

OH i did some change that u can minimize (show/hide) the Ribbon. here is the code:
Change the constructor method from the Ribbon.js file



constructor : function(config){
this.titleId = new Array();

Ext.apply(config, {
baseCls: "x-plain ui-ribbon",
margins: "3 0 0 0",
plugins: new Ext.ux.TabScrollerMenu({
maxText : 15,
pageSize : 5
}),
enableTabScroll : true,
plain: true,
border: false,
deferredRender : false,
layoutOnTabChange : true,
title : '&nbsp;',
collapsible : true,
listeners : {
beforetabchange : function(tp, ntb, ctb){
tp.expand();
},
afterrender : {
scope : this,
fn : function(){
if(this.titleId.length > 0){
for(var key = 0; key < this.titleId.length; key++){
r = Ext.get(this.titleId[key].id);
if(r)
r.on('click', this.titleId[key].fn);
}
}
}
}
}
});

Ext.apply(this, Ext.apply(this.initialConfig, config));

if(config.items){
for(var i = 0; i < config.items.length; i++)
this.initRibbon(config.items[i], i);
}

Ext.ux.Ribbon.superclass.constructor.apply(this, arguments);
}

paffinito
28 Aug 2010, 11:03 PM
Hi bigice,

i have solved whit this changes:

initRibbon:



footerCfg: {
cls : "x-btn-group-header x-unselectable", <-- if you want
tag : "span", <-- important
html : title
}
css
[change]



.x-btn-group-ribbonstyle .x-btn-group-bc {
background-image: url(../images/ribbon-group-bt.gif);
text-align: center;
vertical-align: top;
padding: 2px 2px 4px 2px; <-- little change
}
.ui-ribbon .x-btn-text {
/*max-width : 60px;
text-overflow : ellipsis;*/
text-align : center;
width : 100%;
display : block;
/*overflow : hidden !important;*/ <-- comment this... it's the problem
white-space : normal !important;
}
[add this to fix some problem with IE]


.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns.x-panel-btns-right .x-clear {
font: 0 sans-serif;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left {
text-align: center;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-tc {
vertical-align: top;
}
I have see the collapsable button have a CSS problem with FF therefore i have set it to false.

Bye

jackpan
17 Sep 2010, 4:23 AM
Hi paffinito (http://www.sencha.com/forum/member.php?94006-paffinito),

Can you post a zip file with your fix for IE?

Thanks!

paffinito
17 Sep 2010, 1:19 PM
Hi paffinito (http://www.sencha.com/forum/member.php?94006-paffinito),

Can you post a zip file with your fix for IE?

Thanks!

Unzip in examples directory for a demo.

Bye

jackpan
20 Sep 2010, 4:51 AM
Thanks!

dverkade
22 Jan 2011, 7:47 AM
Hi,

I used this extension, which is great. However there is a little problem with the initial rendering. I've rendered the component in the tbar of a window which has the following result:

http://www.webtricksframework.com/Naamloos.jpg

Anyone know how to fix this?

Stju
24 Jan 2011, 7:37 AM
Looks like You are missing icons, that, could be the problem!

aljone4579
24 Jan 2011, 8:50 PM
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 (http://formicacountertop.net/)

paffinito
28 May 2011, 8:41 AM
I have changed initRibbon to use '->', '-' and ' ' as a normal toolbar.



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

timmcintyre
12 Jul 2012, 11:00 AM
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

DavidThi808
31 Oct 2013, 8:59 AM
The zip file references ext-base.js. Where can I find that?

thanks - dave

tasin
9 Dec 2013, 7:30 PM
It's very cool,thanks

wm003
27 Dec 2013, 12:26 AM
The zip file references ext-base.js. Where can I find that?


ext-3.4.x\adapter\ext

DavidThi808
27 Dec 2013, 6:48 AM
Hi;

I don't see any reference to ext-base.js in the uploaded code - where is it?

Also, this is written for ext-4.2.1.

wm003
30 Dec 2013, 2:26 AM
Also, this is written for ext-4.2.1.

Well, this was posted in the 3.x forum thread.
indeed ext 4 does not have any adapters anymore. You may find the following thread useful then. http://www.sencha.com/forum/showthread.php?132974-ExtJS-4-with-jQuery-Adapter