Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default Real Ribbon ButtonGroup

    Real Ribbon ButtonGroup


    I love the new ButtonGroup from ExtJS 3.0 RCs. But i more likely prefer to have the title at the bottom, like in the Ribbon Control of MS Office. So i looked around and came up with some CSS to style the ButtonGroup just like the real Ribbon one with a title at the bottom and want to share this with the world ^^

    Just add the following css to your project.
    Code:
    .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-bc {
        /* Set this path to your environment! */
        background-image:    url(assets/images/group-bt.gif);
    }
    .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .xtb-text {
        color:                #3E6AAA;
        padding:            0;
    }
    .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer,
    .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns,
    .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns td.x-toolbar-cell {
        padding:            0;
    }
    
    .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns-right .x-panel-fbar {
        float:                none;
    }
    .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left table {
        margin:                0 auto;
    }
    
    /* FIXES FOR IE: */
    .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;
    }
    and add the image from the attachment.

    Now create a ButtonGroup with the cls-configuration 'x-btn-group-ribbonstyle'. Then drop the title configuration and use fbar instead. The result is something like:
    Code:
    new Ext.ButtonGroup({
        cls:        'x-btn-group-ribbonstyle',
        fbar:        ['YourTitleHere']
    });
    And you get something like this:


    Hope its also working for you
    Last edited by curlybracket; 18 Aug 2009 at 4:36 AM. Reason: Added fixes for IE

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

      0  

    Default


    good work can we see demo?
    my ext js site
    http://www.itoto4.com/

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default


    Quote Originally Posted by koko2589 View Post
    good work can we see demo?
    It's no rocket science, but sure, here it is: http://js.curlybracket.de/examples/b.../toolbars.html

  4. #4
    Ext User
    Join Date
    Jul 2009
    Posts
    7
    Vote Rating
    0
    wez.morris is on a distinguished road

      0  

    Default


    Donno if you have the same problem but there is an issue with IE7 and these.

    There's a 1px gap over the top and the bottom text goes a bit wrong. Have you made any fixes to this since the original post?
    Attached Images

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default


    Quote Originally Posted by wez.morris View Post
    Donno if you have the same problem but there is an issue with IE7 and these.

    There's a 1px gap over the top and the bottom text goes a bit wrong. Have you made any fixes to this since the original post?
    You're fully right, i must confess i made no tests in IE yet. I improved the css and added fixed for the IE. For me it's looking correctly now in IE 8 and IE 8 compat mode. Changes are in the first post and also on the examples page.
    Thanks for reporting the bug and have fun with the ribbon

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    318
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default


    Nice work, works like a charm

    Is it possible to give the bar a fixed height / horizontal spacer, so that we get more space between the fbar and the buttons?
    I`m from Holland!

  7. #7
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default


    Hm, can you give a simple image what a look you like? I don't understand your question fully.

  8. #8
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    318
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default


    Quote Originally Posted by curlybracket View Post
    Hm, can you give a simple image what a look you like? I don't understand your question fully.
    Never mind, fixed it already

    I`m having trouble using this css with other themes then the blue one. How can I change the bottom blue bar, containing the text?
    I`m from Holland!

  9. #9
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Vote Rating
    0
    curlybracket is on a distinguished road

      0  

    Default


    I just saw that i missed the group-bt.gif image used in the stylesheet. See the attachment for this image. This is the only background color used for this hack, so changing the image should answer your question.
    Attached Images

  10. #10
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    318
    Vote Rating
    3
    Scorpie is on a distinguished road

      0  

    Default


    Just a heads up; it seems that this hack breaks with 3.1
    I`m from Holland!