Jump to content

Ext.ux.plugin.BadgeText


Recommended Posts

Hi All!

 

Ext.ux.plugin.BadgeText

 

post-906-0-18126700-1402397984_thumb.png

 

 

How to use?

 

1. Download the file BadgeText.js from here: https://github.com/Certun/Ext.ux.plugin.BadgeText/blob/master/BadgeText.js and copy to the directory /files/

 

2. Add CustomFiles in UniServerModule: 

files/BadgeText.js

3. UniButton1 -> ClientEvents -> UniEvents add beforeInit function

function beforeInit(sender)
{
  sender.action = 'badgetext'; 
  sender.plugins = [
                        {
                            ptype:'badgetext',
                            defaultText: 10,
                            disableOpacity:1,
                            disableBg: 'green',
                            align:'right'
                        }
                  ];
}

Use

For example: 

procedure TMainForm.UniButton1Click(Sender: TObject);var
  bJSName: string;
begin
  bJSName := (Sender as TUniButton).JSName;
  UniSession.AddJS(bJSName + '.setBadgeText(' + bJSName + '.getBadgeText() + 1);');
end;

source: https://github.com/Certun/Ext.ux.plugin.BadgeText

demos and more config: https://fiddle.sencha.com/#fiddle/4dc

 

 

is another similar plugin... https://fiddle.sencha.com/#fiddle/2ar

 

 

Best regards.

  • Upvote 4
Link to comment
Share on other sites

  • 3 weeks later...

Hi!

 

If in runtime, try

 

1. Change TextColor:

UniSession.AddJS(UniButton1.JSName + '.badgeEl.setStyle(''color'', ''red'');');

2. Change BackgroundColor:

UniSession.AddJS(UniButton1.JSName + '.badgeEl.setStyle(''background-color'', ''red'');');

Best regards.

  • Upvote 1
Link to comment
Share on other sites

  • 6 months later...

Hi chefdackel !

 

I will try..

 

Best regards.

 

great, for UniGUI it may look like this, here for the TabControl (thanks to Photoshop), more usable for most of us would be a PageControl?

 

post-254-0-36201900-1420476577_thumb.jpg

 

...there is few space for the badgetext. With UniTabControl and UniPageControl, even when putting some blanks at the end of the caption for a tab, the caption is trimmed from the blanks. Maybe there will be a need to change the caption of tabs in runtime, so f.e. "Tab1" if there is no value for the badgetext (and the badgetext is not shown at all), and f.e. "Tab1..." if there is a value for the badgetext. Only an idea. 

 

brfc

Link to comment
Share on other sites

  • 3 weeks later...

How to set visibility of the badgetext by code? Explanation:

 

I want to show the recordcount of a db table with the badgetext. As long as the recordcount is "0" I don`t want to show the badgetext, if the recordcount is not "0" I want to show the badgetext (by code):

 

if dbtable.recordcount =0 then

  [badgetext.visible=false]

else

  [badgetext.visible=true]

 

brfc

 

Link to comment
Share on other sites

  • 9 months later...
  • 1 month later...

Hi Delphi Developer,

 

Thanks for this plugin, is very, very useful ...

Sorry for the daring but how can you associate with a UniTabSheet a UniPageControl instead of a button ??... and with a UniMenuItem???

 

Thank you in advance...

 

thank you very much. As the badgetext is created for buttons, its not so easy to adapt it to TabControls or Pagecontrols, such as here (see image down)? I could not make that work, but that would be another great field for badgetext:

attachicon.gifUnbenannt-1.jpg

 

brfc

 

Hi chefdackel !

 

I will try..

 

Best regards.

 

Hi!

 

Yes, I'm sorry, I promised that I will try to implement it, but there were some problems ...

 

Once again, I will try, if possible, I will let you know

 

Best regards.

Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...