1. #1
    Sencha User khebs@live.com's Avatar
    Join Date
    Mar 2008
    Posts
    83
    Vote Rating
    0
    khebs@live.com is on a distinguished road

      0  

    Default Another Ribbon Style

    Another Ribbon Style


    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.

    Code:
    /**
     * @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);
        }
    });
    Code:
    /**
     * @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

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

    Code:
    /**
     * @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

    Code:
    /**
     * @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

    Code:
    /**
     * @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);
        },
    
        ...
        ...
    
    });
    Attached Images
    Last edited by khebs@live.com; 8 May 2011 at 11:10 AM. Reason: I forgot the controller

  2. #2
    Sencha User khebs@live.com's Avatar
    Join Date
    Mar 2008
    Posts
    83
    Vote Rating
    0
    khebs@live.com is on a distinguished road

      0  

    Default Updates

    Updates


    ui-ribbon.css

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

    Code:
    /**
     * @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

    Code:
    /**
     * @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);
            });
        }
    });
    ribbon2.png

  3. #3
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default UI dont work for me

    UI dont work for me


    Hi,

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

    (beautiful screen shot)
    many thanks
    Vador

  4. #4
    Sencha User khebs@live.com's Avatar
    Join Date
    Mar 2008
    Posts
    83
    Vote Rating
    0
    khebs@live.com is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    <!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>




    thanks for your help
    Vador

  6. #6
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    I was able to get it working as is and can post the code later today if nobody beats me to it.

  7. #7
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    You will need to add the CSS for the extension and your icons from the above post.

    Code:
                       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);
    		});

  8. #8
    Sencha User
    Join Date
    Feb 2009
    Posts
    48
    Vote Rating
    0
    hyteckit is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    thanks my friend
    Vador

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

      0  

    Question


    demo online please or Download link?
    thanks.
    Mateus Medeiros
    Sao Paulo - Brazil

Similar Threads

  1. Microsoft Office Ribbon (VERY COOL)
    By bigice in forum Ext 3.x: User Extensions and Plugins
    Replies: 21
    Last Post: 30 Dec 2013, 2:26 AM
  2. Simple Ribbon UX
    By khebs@live.com in forum Ext 3.x: User Extensions and Plugins
    Replies: 7
    Last Post: 14 Nov 2013, 10:46 AM
  3. Real Ribbon ButtonGroup
    By curlybracket in forum Community Discussion
    Replies: 14
    Last Post: 14 Nov 2013, 10:45 AM
  4. Simple Ribbon (Ext.ux.Ribbon)
    By bigice in forum Ext 3.x: User Extensions and Plugins
    Replies: 1
    Last Post: 28 Aug 2010, 8:18 AM

Thread Participants: 10

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