Results 1 to 10 of 10

Thread: Badge mixin for buttons/tabs

  1. #1
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default Badge mixin for buttons/tabs


  2. #2
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    902
    Answers
    15

    Default

    very nice. thanks for sharing!
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  3. #3
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Hey Brian! Great UX!

    Looking at your mixin, I think it can be a little more tuned using the config object:



    I also got rid of the 'hide-badge' class and just rely on the 'abp-badge' and use the el.toggleCls method.

    Was there a case where the el property was undefined in the afterOnRender method or was that just put there just in case? Technically that method should only be executed after the component was rendered. I renamed it to renderBadgeText just to be a bit more descriptive and not conflict with anything that could possible be there in the future or anyone else's uses.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #4
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Hey Brian! Great UX!

    Looking at your mixin, I think it can be a little more tuned using the config object:

    I also got rid of the 'hide-badge' class and just rely on the 'abp-badge' and use the el.toggleCls method.

    Was there a case where the el property was undefined in the afterOnRender method or was that just put there just in case? Technically that method should only be executed after the component was rendered. I renamed it to renderBadgeText just to be a bit more descriptive and not conflict with anything that could possible be there in the future or anyone else's uses.
    Thanks for the feedback. The check for the el and dom properties were really just a fail-safe. Can't say I encountered a situation during testing where they weren't present. Good call on the renaming of the methods to make them more descriptive. Also hadn't realized I could do away with the 'hide-badge' class.

  5. #5
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    191
    Answers
    9

    Default

    Thanks for sharing!Also added to https://github.com/loiane/sencha-adventures
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  6. #6
    Sencha User
    Join Date
    Sep 2015
    Posts
    5

    Default

    Hi Great plugin!oI have one small issue which doesn't appear in your versions.The top part of the badge is cut off.This happens for buttons and/or tabs.I've added the allow-overflow class to all elements.Thanks for your help :-)Dave

  7. #7
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    Quote Originally Posted by kinda14 View Post
    Hi Great plugin!oI have one small issue which doesn't appear in your versions.The top part of the badge is cut off.This happens for buttons and/or tabs.I've added the allow-overflow class to all elements.Thanks for your help :-)Dave
    Can you provide a fiddle demonstrating the issue?

  8. #8
    Sencha User
    Join Date
    Sep 2015
    Posts
    5

    Default

    Will do, it's part of a large app with themed buttons but i'll try extract and reproduce it in a smaller test app.

  9. #9
    Sencha User
    Join Date
    Sep 2015
    Posts
    5

    Default

    Hello Lumberjack,
    I managed to figure out what the issue was.

    It was caused by my theme setting overriding the allow-overflow css.
    Once I added overflow:visible to my themed component it worked.

    happy days!
    Dave

  10. #10
    bts's Avatar
    Join Date
    Mar 2011
    Location
    Mexicali, Mexico
    Posts
    39
    Answers
    1

    Default

    how can I make this mixin an override part of a custom theme? where should I put the badge.js and badge.css files? As I understand the code for my button custom theme override shoul be place in
    Packages> MyTheme> overrides > button> Button.js
    with the following code:
    Ext.define('MyTheme.button.Button', {
    override : 'Ext.button.Button',
    requires: ['Ext.ux.mixin.Badge'],
    mixis:['badge']});

    sorry about my english, is not my native language

Similar Threads

  1. Replies: 1
    Last Post: 11 Sep 2013, 6:04 AM
  2. Is the badge text on extjs buttons on the road map?
    By elgs in forum Ext: Discussion
    Replies: 2
    Last Post: 10 Jul 2013, 8:47 AM
  3. [SCSS] @mixin sencha-buttons
    By tobiu in forum Sencha Touch 1.x: Bugs
    Replies: 0
    Last Post: 25 Jun 2011, 6:26 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •