PDA

View Full Version : Simple Ribbon (Ext.ux.Ribbon)



bigice
25 Aug 2010, 1:24 PM
Thanks khebs@live.com (http://www.sencha.com/forum/member.php?29088-khebs-live.com) to share with us
http://www.sencha.com/forum/showthread.php?106388-Simple-Ribbon-UX&highlight=Ribbon
I have work on Ribbon and i did some changes

What's New
Title Align (Botton / Top)
Title Event Click
Ribbon by array of config

Sample usage (Simple like that)


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'
}]
}]
}]
});
I Hope you enjoy!

bigice
28 Aug 2010, 8:18 AM
Sorry i have post in duplicity u know connections problems.. please close this Thread and look this original http://www.sencha.com/forum/showthread.php?108130-Microsoft-Office-Ribbon-%28VERY-COOL%29