I have changed initRibbon to use '->', '-' and ' ' as a normal toolbar.
Code:
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