Hybrid View

  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 Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    7
    DavidThi808 is on a distinguished road

      0  

    Default


    Hi all;

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

    thanks - dave

  8. #8
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    7
    DavidThi808 is on a distinguished road

      0  

    Default


    For those looking for this, I've updated this one to run well on ExtJS 4 and added more functionality. Details are here.

    thanks - dave

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