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.