Jump to content

Ext.ux.plugin.BadgeText


Recommended Posts

  • 2 years later...

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 ?

Link to comment
Share on other sites

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'
                        }
                  ];
}
  • Upvote 1
Link to comment
Share on other sites

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...

}

Link to comment
Share on other sites

  • 3 years later...
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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

28 minutes ago, Tokay said:

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:

badge.png.bff54af207ebacfd971fb04d265b2620.png

Link to comment
Share on other sites

  • 7 months later...
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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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><sup>' + ClientDataSet1.FieldByName('EmpNo').AsString + '</sup>'
  else
    ClientDataSet1.FieldByName('Notif').AsString := '<i class="fas fa-globe-asia"; style="color:goldenrod;"></i>';
end;


if use badgetext maybe it will be better.

  • Happy 1
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...