Add ExtEvents at RunTime

[clement]

Hi,

 

I create one panel at runtime, and add the below extEvent to the panel.

However, the page shows blank (no error).

 

          vOrderPanel.ClientEvents.ExtEvents.Values['afterrender']:=' function afterrender (sender, eOpts)' +
          '{Sender.setBodyStyle(' + QuotedStr ('border-radius') + ',' + QuotedStr('20px') + ');}';

 

can I know how to add the extEvent to the panel at RunTime?

 

Thank You.

[Sherzod]

Hi,

 

Sender.setBodyStyle, Sender - incorrect

 

sender.setBodyStyle, sender - correct

 

Best regards,

[erich.wanker]

Just for Info...

 

i make this with a CSS File

 

 

 

 

in runtime on creating my_unipanel;

my_unipanel.ClientEvents.ExtEvents.Add('beforerender=function beforerender(sender, eOpts){ sender.addClass("scoresystem");}');

in designtimer .. unipanel > ClientEvent > ExtEvent < beforerender:

function beforerender(sender, eOpts)
{
  sender.addClass('scoresystem');
}

in uniservermodule > CustomCSS

</style> 
<link rel=stylesheet href="/files/css/sec.css" />
<style type="text/css">

in Serverfolder / Files / css / i have a css file called "sec.css"

 

a css example with round corners, hover effect and so on:

 

.scoresystem {
   -webkit-border-radius: 10px;
   border-radius: 10px; 
   user-select: none;
   -o-user-select:none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   cursor: hand;
   cursor: pointer;
   overflow:hidden; 
-webkit-box-shadow: 4px 4px 8px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 8px -6px rgba(0,0,0,0.75);
box-shadow: 4px 4px 8px -6px rgba(0,0,0,0.75);


}


.scoresystem:hover {
-webkit-box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
-moz-box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
}

HTH

Erich

[Freeman35]

in uniservermodule > CustomCSS

In here, copy & paste css file inside just. So you don't need xxxx.css file

If you wanna use cssfile, add to in server module

Example:

procedure TUniServerModule.UniGUIServerModuleBeforeInit(Sender: TObject);
var Apname: string
begin
//  ExtRoot := 'x:\uniGUI\ext-4.2.5.1763\';
//  UniRoot := 'c:\Delphi\Components\uniGUI\uniGUI\uni-0.99.96.1321\';
//  UniMobileRoot:= 'c:\Delphi\Components\uniGUI\uniGUI\unim-0.99.96.1321\';
  CustomMeta.Clear;
//  CustomMeta.Add('<script src="/files/jquery-3.2.1.js"></script> ');
//  CustomMeta.Add('<script src="/files/bootstrap-3.3.7/js/bootstrap.min.js"></script> ');

Apname:= TPath.GetFileNameWithoutExtension(Application.ExeName);
   MimeTable.AddMimeType('ttf',  Apname+'/font', False);
   
   CustomFiles.Clear;
   CustomFiles.add('\files\css\xxx.css');
   CustomFiles.add('\files\css\yyy.css')

[naozuka]

The solution that worked for me for runtime.

Use AddJS for runtime. "ClientEvents.ExtEvents" for design time. 

 

UniSession.AddJS(UniButton1.JsName + '.addClass(''btn-cancel'')');