PDA

View Full Version : Another Ribbon Style



khebs@live.com
8 May 2011, 9:42 AM
Yet another ribbon for ExtJS 4. Experimental UX.

- FIXME: Some CSS Problem with Firefox Chrome in XP. Specifically in ButtonGroups does not properly aligns the height with other groups if it has only 1 item or a menu button, etc. Please experiment, if you think you fixed it, please post back your magic solution here.



/**
* @class App.lib.ux.Ribbon
* @extend Ext.tab.Panel
*/
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
margin: '5 0 0 0',
autoHeight: true,

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});




/**
* @class App.lib.ux.RibbonTab
* @extend Ext.tab.Tab
*/
Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
unstyled: true,
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '1 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});


The CSS



.ui-ribbonbar
{
border-color: #99BBE8;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
border-bottom: 1px solid #99BBE8 !important;
}

.ui-ribbonbar .x-btn-as-arrow em
{
display: block;
background-color: transparent;
padding-bottom: 15px;
font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
padding-bottom: 13px;
}

.ui-ribbonbar .x-tab-bar-strip-default-plain-horizontal
{
height: 0px !important;
}

.ui-ribbonbar .x-tab-default-top
{
background-image: none;
background-color: transparent;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
font-size: 0px !important;
text-indent: -999px;
}

.ui-ribbonbar .x-tab-top-active
{
border: 1px solid #8DB2E3;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(30%,white),color-stop(100%,#DFE9F5));
background-image: -moz-linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
background-image: linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
}

.ui-ribbonbar .x-tab-default-top-active
{
border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
font-weight: normal !important;
}

.ui-ribbonbar .x-toolbar-default
{
border-color: #99BBE8;
background-image: none;
background-color: #D3E1F1;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
}


Sample Usage:

Make Ribbon Tabs



/**
* @class App.view.employees.list.Ribbon
* @extend App.lib.ux.RibbonTab
*/
Ext.define('App.view.employees.list.Ribbon', {
extend: 'App.lib.ux.RibbonTab',
alias: 'widget.employeeslistribbon',

title: 'Employees',
closable: false,

items: [{
title: 'Data',
items: [{
text: 'List of All\nEmployees',
iconCls: 'icon-ribbon-address32',
scale: 'large',
iconAlign: 'top',
action: 'list'
}]
}, {
title: 'New',
columns: 3,
items: [{
text: 'New Employee',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-contact32',
action: 'newemployee'
}, {
text: 'New Department',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-inbox32'
}, {
text: 'Archived Documents',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-docs32'
}]
}, {
title: 'Action',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Delete',
action: 'delete',
iconCls: 'icon-ribbon-deletecontact32'
}, {
text: 'Refresh All',
iconCls: 'icon-ribbon-refresh32'
}]
}, {
title: 'Reports',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Available Reports',
iconCls: 'icon-ribbon-report32'
}]
}]
});


Ribbon Bar - which is probably the north region / dock: 'top' of your viewport / window



/**
* @class App.view.ui.RibbonBar
* @extend Ext.tab.Panel
*/
Ext.define('App.view.ui.RibbonBar', {
extend: 'App.lib.ux.Ribbon',
alias: 'widget.uiribbonbar',

initComponent: function () {
this.callParent(arguments);
}
});

...

Ext.Viewport({
...
items: [{
xtype: 'uiribbonbar', region: 'north'
}]
...
});


In your controller



/**
* @class App.controller.Employees
* @extend Ext.app.Controller
*/
Ext.define('App.controller.Employees', {
extend: 'Ext.app.Controller',

views: [
'employees.list.Ribbon',
...
],

refs: [
// List
{ ref: 'listRibbon', selector: 'employeeslistribbon', xtype: 'employeeslistribbon', autoCreate: true }.
{ ref: 'ribbonBar', selector: 'uiribbonbar' }.
...
...
],

// private
init: function () {
this.control({
'employeeslistribbon': {
activate: this.showList
},
...
...
});
},

// private
onLaunch: function () {
this.showList();
},

/**
* Shows Employee Listings
* @method showList
*/
showList: function () {
var rb = this.getRibbonBar(), ribbon = this.getListRibbon();
...
if (!ribbon.rendered) rb.add(ribbon);
...
//rb.setActiveTab(ribbon);
},

...
...

});

khebs@live.com
12 May 2011, 3:50 AM
ui-ribbon.css



.ui-ribbonbar
{
background: transparent;
}

.ui-ribbonbar .x-panel-body-default
{
border-color: #99BBE8 !important;
background-image: none !important;
background-color: #DFE9F5 !important;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(60%,#ccdbec)) !important;
background-image: -moz-linear-gradient(top,#DFE9F5 5%,#ccdbec 60%) !important;
background-image: linear-gradient(top,#DFE9F5 5%,#ccdbec 60%) !important;

border-bottom: 1px solid #99BBE8 !important;

border-radius: 2px 2px 0px 0px;
-moz-border-radius: 2px 2px 0px 0px;
-webkit-border-radius: 2px 2px 0px 0px;
-o-border-radius: 2px 2px 0px 0px;
-ms-border-radius: 2px 2px 0px 0px;
-khtml-border-radius: 2px 2px 0px 0px;
}

.ui-ribbonbar .x-tab-bar-strip
{
border-top: 0px;
padding-right: 10px;
}

.ui-ribbonbar .x-btn-as-arrow em
{
display: block;
background-color: transparent;
padding-bottom: 15px;
font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
padding-bottom: 13px;
}

.ui-ribbonbar .x-tab-bar-strip-default-plain-horizontal
{
height: 0px !important;
}

.ui-ribbonbar .x-tab-default-top
{
background-image: none;
background-color: transparent;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
font-size: 0px !important;
text-indent: -999px;
}

.ui-ribbonbar .x-tab-bar-body
{
top: 3px !important;
border-bottom: 0px !important;
}

.ui-ribbonbar .x-tab-top-active
{
border: 1px solid #8DB2E3;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(5%,white),color-stop(80%,#DFE9F5));
background-image: -moz-linear-gradient(top,white,#F5F9FE 5%,#DFE9F5 80%);
background-image: linear-gradient(top,white,#F5F9FE 5%,#DEECFD 80%);
}

.ui-ribbonbar .x-tab-default-top-active
{
border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
font-weight: normal !important;
}

.ui-ribbonbar .x-tab-bar-body .x-box-inner
{
height: 24px !important;
}


App.lib.ux.Ribbon



/**
* @class App.lib.ux.Ribbon
* @extend Ext.tab.Panel
*/
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
autoHeight: true,
border: false,

bodyStyle: 'margin-bottom: -3px;',

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});


App.lib.ix.RibbonTab



/**
* @class App.lib.ux.RibbonTab
* @extend Ext.tab.Tab
*/
Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '3 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});


26028

ajaxvador
16 May 2011, 2:11 AM
Hi,

I tried the example posted on the forum, but that does not work. can you post an example or demo

(beautiful screen shot) =D>
many thanks

khebs@live.com
16 May 2011, 8:23 AM
I tried the example posted on the forum, but that does not work. can you post an example or demo
- What did not work?

This ux works just like the Toolbar, nothing special. Maybe just the css and some config in the ux itself.

(beautiful screen shot)
- Thanks for appreciating it

ajaxvador
16 May 2011, 9:52 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="scripts/ext4//resources/css/ext-all.css" />
<script type="text/javascript" src="scripts/ext4/ext-all.js"></script>

<style>
.ui-ribbonbar
{
border-color: #99BBE8;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
border-bottom: 1px solid #99BBE8 !important;
}

.ui-ribbonbar .x-btn-as-arrow em
{
display: block;
background-color: transparent;
padding-bottom: 15px;
font-size: 1px!important;
}

.x-chrome .ui-ribbonbar .x-btn-as-arrow em
{
padding-bottom: 13px;
}

.ui-ribbonbar .x-tab-bar-strip-default-plain-horizontal
{
height: 0px !important;
}

.ui-ribbonbar .x-tab-default-top
{
background-image: none;
background-color: transparent;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
-o-box-shadow: white 0 1px 0 0 inset,white -1px 0 0 0 inset,white 1px 0 0 0 inset;
border: 1px solid transparent;
}

.ui-ribbonbar .x-tab-default-top
{
margin-left: 2px !important;
}

.ui-ribbonbar .x-tab-default-closable
{
padding-right: 10px;
}

.ui-ribbonbar .x-tab-close-btn
{
font-size: 0px !important;
text-indent: -999px;
}

.ui-ribbonbar .x-tab-top-active
{
border: 1px solid #8DB2E3;
background-image: none;
background-color: #DFE9F5;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(30%,white),color-stop(100%,#DFE9F5));
background-image: -moz-linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
background-image: linear-gradient(top,white,#F5F9FE 30%,#DEECFD 100%);
}

.ui-ribbonbar .x-tab-default-top-active
{
border-bottom-color: #DFE9F5 !important;
}

.ui-ribbonbar .x-tab em
{
padding: 0 10px;
}

.ui-ribbonbar .x-tab em button
{
font-weight: normal !important;
}

.ui-ribbonbar .x-toolbar-default
{
border-color: #99BBE8;
background-image: none;
background-color: #D3E1F1;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
}
</style>

<script>

Ext.require([ '*' ]);

/**
* @class App.lib.ux.Ribbon
* @extend Ext.tab.Panel
*/
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
margin: '5 0 0 0',
autoHeight: true,

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});

/**
* @class App.lib.ux.RibbonTab
* @extend Ext.tab.Tab
*/
Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
unstyled: true,
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '1 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});

/**
* @class App.view.employees.list.Ribbon
* @extend App.lib.ux.RibbonTab
*/
Ext.define('App.view.employees.list.Ribbon', {
extend: 'App.lib.ux.RibbonTab',
alias: 'widget.employeeslistribbon',

title: 'Employees',
closable: false,

items: [{
title: 'Data',
items: [{
text: 'List of All\nEmployees',
iconCls: 'icon-ribbon-address32',
scale: 'large',
iconAlign: 'top',
action: 'list'
}]
}, {
title: 'New',
columns: 3,
items: [{
text: 'New Employee',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-contact32',
action: 'newemployee'
}, {
text: 'New Department',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-inbox32'
}, {
text: 'Archived Documents',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-docs32'
}]
}, {
title: 'Action',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Delete',
action: 'delete',
iconCls: 'icon-ribbon-deletecontact32'
}, {
text: 'Refresh All',
iconCls: 'icon-ribbon-refresh32'
}]
}, {
title: 'Reports',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Available Reports',
iconCls: 'icon-ribbon-report32'
}]
}]
});

var tabs = Ext.createWidget('tabpanel', {

itemId: 'tabPanel',
activeTab: 0,
border:false,
frame:false, plain:false,
defaults :{
bodyPadding: 10
},
items: [{

title: 'Short Text'
// closable: true
},{

title: 'Long Text'
}]
});


Ext.onReady(function() {
Ext.QuickTips.init();

var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [

{
region: 'north',

height: 100,

layout:'fit',
items: [{xtype: 'uiribbonbar'}]
} ,

Ext.create('Ext.tab.Panel', {
region: 'center',
deferredRender: false,
activeTab: 0,
items: [{
title: 'Bureau',

autoScroll: true
}, {
// contentEl: 'center2',
title: 'Center Panel',
autoScroll: true,
closable: true
}]
})]
});
});
</script>
</head>
<body>
</body>
</html>

http://mbfusion.com/rib.png


thanks for your help

ykey
16 May 2011, 11:54 AM
I was able to get it working as is and can post the code later today if nobody beats me to it.

ykey
16 May 2011, 2:38 PM
You will need to add the CSS for the extension and your icons from the above post.



Ext.onReady(function() {
Ext.define('App.lib.ux.Ribbon', {
extend: 'Ext.tab.Panel',
alias: 'widget.appuxribbon',
cls: 'ui-ribbonbar',
activeTab: 0,
plain: true,
unstyled: true,
autoHeight: true,
border: false,

bodyStyle: 'margin-bottom: -3px;',

addTab: function (config, focus) {
var tab = this.add(config);
if (focus === true) this.setActiveTab(tab);
},

initComponent: function () {
this.callParent(arguments);
}
});

Ext.define('App.lib.ux.RibbonTab', {
extend: 'Ext.panel.Panel',
alias: 'widget.appuxribbontab',
layout: 'hbox',
title: 'Untitled',

defaults: {
xtype: 'buttongroup',
headerPosition: 'bottom',
margins: '3 0 3 3'
},

initComponent: function () {
this.callParent(arguments);

this.on('added', function (o, c, i) {
Ext.each(this.items.items, function (btnGroups) {
Ext.each(btnGroups.items.items, function (item) {
if (item.scale !== 'small') {
var text = String(item.text);

if (text.indexOf('\n') != -1) { // has \n ?
text = text.replace('\n', '<br/>');
} else if (text.indexOf(' ') != -1) {
text = text.replace(/[ +]/gi, '<br/>');
} else {
if (!item.menu || item.arrowAlign !== 'bottom')
item.cls = 'x-btn-as-arrow';
}

if (item.setText)
item.setText(text);
}
});
});
});

this.on('render', function () {
this.doLayout(true);
});
}
});

Ext.define('App.view.ui.RibbonBar', {
extend: 'App.lib.ux.Ribbon',
alias: 'widget.uiribbonbar',

initComponent: function () {
this.callParent(arguments);
}
});

Ext.define('App.view.employees.list.Ribbon', {
extend: 'App.lib.ux.RibbonTab',
alias: 'widget.employeeslistribbon',
title: 'Employees',
closable: false,
items: [{
title: 'Data',
items: [{
text: 'List of All\nEmployees',
iconCls: 'icon-ribbon-address32',
scale: 'large',
iconAlign: 'top',
action: 'list'
}]
}, {
title: 'New',
columns: 3,
items: [{
text: 'New Employee',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-contact32',
action: 'newemployee'
}, {
text: 'New Department',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-inbox32'
}, {
text: 'Archived Documents',
scale: 'large',
iconAlign: 'top',
iconCls: 'icon-ribbon-docs32'
}]
}, {
title: 'Action',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Delete',
action: 'delete',
iconCls: 'icon-ribbon-deletecontact32'
}, {
text: 'Refresh All',
iconCls: 'icon-ribbon-refresh32'
}]
}, {
title: 'Reports',
defaults: {
scale: 'large',
iconAlign: 'top'
},
items: [{
text: 'Available Reports',
iconCls: 'icon-ribbon-report32'
}]
}]
});

var rb = Ext.widget('uiribbonbar');
var ribbon = Ext.widget('employeeslistribbon');

Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [rb]
});

rb.add(ribbon);
});

hyteckit
16 May 2011, 5:23 PM
Really cool.

Wondering if we can get a vertical version.

Most monitors these days are widescreen. There isn't much vertical space left for content after adding up the vertical space use up by the ribbon and the web browser toolbar.

ajaxvador
17 May 2011, 12:48 AM
thanks my friend

bigice
26 May 2011, 9:07 AM
demo online please or Download link?
thanks.

ozum
22 Sep 2011, 6:01 AM
This seems great. Thank you khebs for sharing. To test it quickly I used ykey's sample code.

Just to inform: In IE 9 the unselected tabs appear blue whereas they are white in other browsers.

Edit: The error message below is from a script of Roboform Firefox plugin. Maybe you want to investigate the reason. (rfhelper32.js (line 348))

Also when I change the tab in Firefox 6, firebug throws lots of same exception shown in the picture below. However this error doesn't appear in Chrome 14 console.


28249

ssamayoa
12 Oct 2011, 2:06 PM
Something new with this cool UX?

plantijaabjcbd
15 Mar 2012, 9:00 PM
Within the ribbon, developers can customise and add their own styles to the ribbon. These can be these used within the Content Editor WebPart for a SharePoint Publishing Page.
To configure WinZip to use another interface:


Click the Settings tab in the ribbon
Click the Options button
In the Configuration dialog that displays click the View tab
Choose the Legacy menus/toolbar radio button or the WinZip ribbon interface radio button
Click OK

plantillas web (http://www.plantilandia.com/)
*ACTIONS speak louder than words*

g13013
21 Mar 2012, 10:19 AM
Great Extension, really cool, i'lle try it as soon as possible. But I think that the Ribbon is under a licence issued from m$ so before you put it in your project take a look at licence requirement!

danilo2
29 Nov 2012, 2:55 AM
Is it possible to do it in GXT? Or it uses some extjs specific features?

DavidThi808
31 Oct 2013, 9:00 AM
Hi all;

Is there a zip file of this anywhere? Preferably one that runs on Ext4?

thanks - dave

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

thanks - dave