Ext.ux.plugin.BadgeText

[leozem]

Thank you!

[Fred Montier]

Hi there...

 

Using XXX.1463 / Tokyo and noticed that in this particular example using your plug-in for a badge effect the button is cutting off the off-set badge's area as shown in the image.

 

It used to work in prior versions. Somthing due to the sencha Ex.JS version upgrade ?

Any tip or work around it ?

[Marlon Nardi]

Hi there...

 

Using XXX.1463 / Tokyo and noticed that in this particular example using your plug-in for a badge effect the button is cutting off the off-set badge's area as shown in the image.

 

It used to work in prior versions. Somthing due to the sencha Ex.JS version upgrade ?

 

Any tip or work around it ?

 

To solve add this

 

config.style={'overflow': 'visible'};

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

[Fred Montier]

Works perfectly... thanks.



{ Você poderia escrever um manual/livro para nós sobre a integração do Ext.JS  com o uniGUI pois ando apanhando muito nisso ainda. Não especificamente no  JavaScript mas no Ext.JS para o uniGUI. E como parece que é a maior autoridade sobre o assunto com os seus componentes, seria muito útil e certamente teria muita procura. Este é o calcanhar de Aquiles do framework: falta de documentação.

Eu e um monte de gente...

}

[Fred Montier]

See new demo at
http://forums.unigui.com/index.php?/topic/10762-all-about-the-badge/

Thanks... and your JS correction is credited in the source code.

[Tokay]

On 6/19/2018 at 4:23 AM, Marlon Nardi said:

 

To solve add this

 

config.style={'overflow': 'visible'};

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

Hi marlon. I try your fix but have no success. In the browser console I get a message: config is not defined. Please help me solve an issue. I use 1545 UniGUI.

[Sherzod]

5 hours ago, Tokay said:

Hi marlon. I try your fix but have no success. In the browser console I get a message: config is not defined. Please help me solve an issue. I use 1545 UniGUI.

Hello,

Make a simple testcase if possible, we will check.

[Tokay]

Project1.7z

Here it is.

[Sherzod]

24 minutes ago, Tokay said:

Project1.7z 55.78 kB · 0 downloads

I will check.

[Sherzod]

28 minutes ago, Tokay said:

Project1.7z 55.78 kB · 0 downloads

Here it is.

Probably there was a problem with copy/paste ...

Should be:

UniButton1 -> ClientEvents -> UniEvents ->

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

Result:

[Tokay]

Hmmm, it works! Thank you!

[Point]

On 6/27/2021 at 2:45 AM, Sherzod said:

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

hello,

Hope it could be implemented on the grid action button. but I haven't been able to find a way.

i try on here :

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts)
{
  //console.log(columns[0].items[0]);
  var act = columns[0].items[0];
  
  act.style={'overflow': 'visible'};
  act.action = 'badgetext'; 
  act.plugins = [
                        {
                            ptype:'badgetext',
                            defaultText: 0,
                            disableOpacity:1,
                            disableBg: 'green',
                            align:'right'
                        }
                  ];
  
}

and the final goal is showing value on badgetext:

procedure TMainForm.ClientDataSet1CalcFields(DataSet: TDataSet);
var
  bJSName: string;
begin
  bJSName := UniDBGrid1.Columns[0].ActionColumn.Buttons.Items[0].JSName;
  UniSession.AddJS(bJSName + '.setBadgeText(' + bJSName + '.getBadgeText() + ' +
             ClientDataSet1.FieldByName('EmpNo').AsString + ');');
end;

best regards.

[Sherzod]

Hello,

2 hours ago, Point said:

but I haven't been able to find a way.

So were you able to do it?

[Point]

12 minutes ago, Sherzod said:

Hello,

So were you able to do it?

not yet, seem i need your help.

[Sherzod]

31 minutes ago, Point said:

not yet, seem i need your help.

I don’t even know, the object has a renderer method, need to analyze it.

[Point]

what do you think if I rewrite the badgetext.js file and change the button type to actioncolumn like this:
 

	init: function(actioncolumn){

		var me = this;

		me.actioncolumn = actioncolumn;
		me.text = me.defaultText;

		actioncolumn.on('render', me.addBadgeEl, me);

		Ext.apply(actioncolumn,{

			setBadgeText:function(text){

				me.disable = typeof text == 'undefined' || text === me.defaultText;
				me.text = !me.disable ? text : me.defaultText;
				if (actioncolumn.rendered) {
					actioncolumn.badgeEl.update(text.toString ? text.toString() : text);
					if (Ext.isStrict && Ext.isIE8) {
						actioncolumn.el.repaint();
					}
					me.setDisabled(me.disable);
				}
				return actioncolumn;
			},

			getBadgeText:function(){
				return me.text;
			}


		});

	},

i've tried it, but still not come out. 

[Point]

using simple logic :

[Sherzod]

33 minutes ago, Point said:

using simple logic :

Solved?

[Point]

9 hours ago, Sherzod said:

Solved?

not using action column or badgetext, just using OnCalcField and Superscript tag. 🙂

procedure TMainForm.ClientDataSet1CalcFields(DataSet: TDataSet);
begin
  if ClientDataSet1.FieldByName('EmpNo').AsInteger mod 2 = 1 then
    ClientDataSet1.FieldByName('Notif').AsString := '<i class="fas fa-globe-asia"; style="color:blue;"></i>^{' + ClientDataSet1.FieldByName('EmpNo').AsString + '}'
  else
    ClientDataSet1.FieldByName('Notif').AsString := '<i class="fas fa-globe-asia"; style="color:goldenrod;"></i>';
end;

if use badgetext maybe it will be better.

[shilei]

If the component is dynamically created, it will not take effect. As shown in the following example

procedure TAA00_0001.bt_saleClick(Sender: TObject);
var
  tempbt: TUniButton;
begin
  inherited;
  pl_sale.Visible := True;
  pl_pf.Visible := not pl_sale.Visible;
  //pl_pf.Width := 0;
  pl_sale.Align := alClient;

  tempbt := TUniButton.Create(Self);
  tempbt.Parent := bt_sale.Parent;
  tempbt.Left := bt_pf.Left + bt_pf.Width + 10;
  tempbt.Top := bt_pf.Top;
  tempbt.Caption := 'test';

  tempbt.ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {config.style={"overflow":"visible"}; sender.action = "badgetext"; sender.plugins = [{ptype:"badgetext",defaultText: 10,disableOpacity:1,disableBg: "green",align:"right"}];}';

  bt_sale.ClientEvents.UniEvents.Values['beforeInit'] := tempbt.ClientEvents.UniEvents.Values['beforeInit'];

end;

 

[Sherzod]

1 hour ago, shilei said:

If the component is dynamically created, it will not take effect. As shown in the following example

Hello,

At first glance, the solution seems quite simple, but first could you please tell me which uniGUI build and edition you are using?

I can see on the forum that you have been registered for more than 10 years.

[shilei]

I'm just interested in unigui. I'm using the latest 1608 trial version and occasionally conducting small test cases.

[Sherzod]

On 12/24/2025 at 12:54 PM, shilei said:

tempbt

Try assigning a name to the dynamically created component.

[shilei]

Yes, it takes effect once a specific name is provided.

[Freeman35]

"badgeText" this class name give to div in js file ".... cls:'badgeText x-unselectable'}"
So, you can override that css

   function beforeInit(sender, config) {
     config.cls = 'badgeText-container';
     sender.action = 'badgetext';
     sender.plugins = [{
         ptype: 'badgetext',
         defaultText: '',
         disableOpacity: 1,
         align: 'bottom right'
       }
     ];
   }

.badgeText-container{
    overflow: visible !important; ← need override
}
.badgeText {
    #font-size: 11px !important;  ← need override
    #font-family: Arial, sans-serif !important;