1. #1
    Sencha User
    Join Date
    Sep 2008
    Location
    Brazil
    Posts
    34
    Vote Rating
    0
    bigice is on a distinguished road

      0  

    Thumbs up Microsoft Office Ribbon (VERY COOL)

    Microsoft Office Ribbon (VERY COOL)


    Hello,
    I Have work on (http://www.sencha.com/forum/showthre...ghlight=Ribbon)
    Thanks khebs@live.com Ext User for share this links.
    So i did some modify and the Ribbon got a PUMP!
    screen2.pngscreen1.png

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

    Sample Usage:
    PHP Code:
    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 : {
                        
    columns3,
                        
    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'
                    
    }]
                }]
            }] 
    Attached Files
    Mateus Medeiros
    Sao Paulo - Brazil

  2. #2
    Sencha User
    Join Date
    Mar 2009
    Posts
    6
    Vote Rating
    0
    Oliven is on a distinguished road

      0  

    Default


    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

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    6
    Vote Rating
    0
    Oliven is on a distinguished road

      0  

    Default


    Is it possible to "minimize the Ribbon" that you can do in Word 2007 for example

  4. #4
    Sencha User paffinito's Avatar
    Join Date
    Oct 2009
    Location
    Italy
    Posts
    14
    Vote Rating
    0
    paffinito is on a distinguished road

      0  

    Default


    Very nice plugin!!!

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

    Code:
    cls : "x-btn-group-ribbonstyle", --> cls : "x-btn-group-ribbonstyle x-unselectable",
    CSS
    Code:
    .x-btn-group-ribbonstyle .x-btn-group-header {
        /*font-size: 10px !important;*/
        cursor: default; /* Addition */
    }

  5. #5
    Sencha User paffinito's Avatar
    Join Date
    Oct 2009
    Location
    Italy
    Posts
    14
    Vote Rating
    0
    paffinito is on a distinguished road

      0  

    Default IE problem

    IE problem


    Not work with internet explorer.

    Error line 4273 in ext-all-debug.js

    Thanks for your help
    Attached Images

  6. #6
    Ext User
    Join Date
    Feb 2009
    Posts
    1
    Vote Rating
    0
    dayudong is on a distinguished road

      0  

    Default


    It's very cool, but not work in IE8.
    BTW, how to add menu or menu items dynamically?
    Thanks.

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Posts
    566
    Vote Rating
    0
    moegal is on a distinguished road

      0  

    Default


    This is really cool. Is there anyway to do it without special graphics? Can it use existing graphics?

    Marty

  8. #8
    Sencha User
    Join Date
    Sep 2008
    Location
    Brazil
    Posts
    34
    Vote Rating
    0
    bigice is on a distinguished road

      0  

    Lightbulb IE its a big problema

    IE its a big problema


    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

    PHP Code:
    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,
                
    plaintrue,
                
    borderfalse,
                
    deferredRender false,
                
    layoutOnTabChange true,
                
    title '&nbsp;',
                
    collapsible true
                
    listeners : {
                    
    beforetabchange : function(tpntbctb){
                        
    tp.expand();
                    },
                    
    afterrender : {
                        
    scope this,
                        
    fn : function(){
                            if(
    this.titleId.length 0){
                                for(var 
    key 0key this.titleId.length;  key++){
                                    
    Ext.get(this.titleId[key].id);
                                    if(
    r)
                                        
    r.on('click'this.titleId[key].fn);
                                }
                            }
                        }
                    }
                }
            });
            
            
    Ext.apply(thisExt.apply(this.initialConfigconfig));
            
            if(
    config.items){
                for(var 
    0config.items.lengthi++)
                    
    this.initRibbon(config.items[i], i);
            }
            
            
    Ext.ux.Ribbon.superclass.constructor.apply(thisarguments);
        } 
    Mateus Medeiros
    Sao Paulo - Brazil

  9. #9
    Sencha User paffinito's Avatar
    Join Date
    Oct 2009
    Location
    Italy
    Posts
    14
    Vote Rating
    0
    paffinito is on a distinguished road

      0  

    Post


    Hi bigice,

    i have solved whit this changes:

    initRibbon:

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

    Code:
    .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]
    Code:
    .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

  10. #10
    Ext User
    Join Date
    Sep 2010
    Posts
    10
    Vote Rating
    0
    jackpan is on a distinguished road

      0  

    Default


    Hi paffinito,

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

    Thanks!

Similar Threads

  1. ribbon Extension menubar like office 2007
    By august in forum Ext 1.x: User Extensions and Plugins
    Replies: 3
    Last Post: 14 Nov 2013, 10:48 AM
  2. Microsoft Office style menubar
    By Beer Brother in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 16 May 2010, 11:52 AM
  3. Problem with Microsoft Office 2003 Web Components
    By hezhanfei in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 9 Dec 2009, 10:22 PM
  4. Toolbar like Office 2007 (Ribbon)
    By kimmaydesign in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 18 Aug 2009, 8:22 AM
  5. Thoughts on building an MS Office ribbon
    By SeaSharp in forum Community Discussion
    Replies: 1
    Last Post: 22 Nov 2007, 4:40 AM

Thread Participants: 12

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar