Microsoft Office Ribbon (VERY COOL)

[paffinito]

Hi paffinito,

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

Thanks!

Unzip in examples directory for a demo.

Bye

[jackpan]

Thanks!

[dverkade]

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]

Looks like You are missing icons, that, could be the problem!

[aljone4579]

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

[paffinito]

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]

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