Threaded View

  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

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