Jump to content

Help to program an own component based on TUniDateTimePicker


YangNing
 Share

Recommended Posts

Hi YangNing.

 

How to use? 
 
1. Download files: 
     http://www.eekboom.de/js/ClearButton.js (copy to directory .. \ files \) 
     http://www.eekboom.de/css/ClearButton.css (copy to directory .. \ files \) 
     http://www.eekboom.de/images/clear-text-icon.gif (copy to directory .. \ images \, if this directory is not present, create a directory) 
 
2. UniDateTimePicker1 -> ClientEvents -> UniEvents add function beforeInit:
function beforeInit(sender)
{
  sender.plugins = new Ext.ux.form.field.ClearButton({animateClearButton: true});
}

or

function beforeInit(sender)
{
  sender.plugins = ['clearbutton'];
}

post-906-0-58297400-1401280743_thumb.png

 

This plugin can also be used for some other text controls, for example:

post-906-0-45841500-1401282251_thumb.png    post-906-0-48660400-1401282276_thumb.png

 

...

The plugin understands these config options:

  • hideClearButtonWhenEmpty (Boolean) - Hide the clear button when the field is empty (default: true).
  • hideClearButtonWhenMouseOut (Boolean) - Hide the clear button until the mouse is over the field (default: true).
  • animateClearButton (Boolean) - When the clear buttons is hidden/shown, this will animate the button to its new state (using opacity) (default: true).
  • clearOnEscape - Empty the text field when ESC is pressed while the text field is focused (default: true).
  • ...

 

Best regards...

  • Upvote 3
Link to comment
Share on other sites

 

Hi YangNing.

 

How to use? 
 
1. Download files: 
     http://www.eekboom.de/js/ClearButton.js (copy to directory .. \ files \) 
     http://www.eekboom.de/css/ClearButton.css (copy to directory .. \ files \) 
     http://www.eekboom.de/images/clear-text-icon.gif (copy to directory .. \ images \, if this directory is not present, create a directory) 
 
2. UniDateTimePicker1 -> ClientEvents -> UniEvents add function beforeInit:
function beforeInit(sender)
{
  sender.plugins = new Ext.ux.form.field.ClearButton({animateClearButton: true});
}

or

function beforeInit(sender)
{
  sender.plugins = ['clearbutton'];
}

attachicon.gifclearButton.png

 

This plugin can also be used for some other text controls, for example:

attachicon.gifclearButton2.png    attachicon.gifclearButton3.png

 

...

The plugin understands these config options:

  • hideClearButtonWhenEmpty (Boolean) - Hide the clear button when the field is empty (default: true).
  • hideClearButtonWhenMouseOut (Boolean) - Hide the clear button until the mouse is over the field (default: true).
  • animateClearButton (Boolean) - When the clear buttons is hidden/shown, this will animate the button to its new state (using opacity) (default: true).
  • clearOnEscape - Empty the text field when ESC is pressed while the text field is focused (default: true).
  • ...

 

Best regards...

 

Thanks a lot.

Link to comment
Share on other sites

  • Administrators

 

Hi YangNing.

 

How to use? 
 
1. Download files: 
     http://www.eekboom.de/js/ClearButton.js (copy to directory .. \ files \) 
     http://www.eekboom.de/css/ClearButton.css (copy to directory .. \ files \) 
 
 

 

2. Add files to ServerModule.CustomFiles

files/ClearButton.js
files/ClearButton.css
Link to comment
Share on other sites

  • 2 weeks later...
Hello everyone, I'm trying to catch the event of purification of the field for this event is used to onAjaxEvent TUniEdit. In older releases, everything worked. In this I can not do it, tell me the solution.
 
procedure TMainFrame.FindEditAjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'onClearButton' then
    begin
      ...
    end;
end;

Thank you.

 

Link to comment
Share on other sites

 

Hello everyone, I'm trying to catch the event of purification of the field for this event is used to onAjaxEvent TUniEdit. In older releases, everything worked. In this I can not do it, tell me the solution.
 
procedure TMainFrame.FindEditAjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = 'onClearButton' then
    begin
      ...
    end;
end;

Thank you.

 

 

 

Hi Mediv07.

 

With this plugin you can so:

 

1. Firstly, I changed ClearButton.js, download the attached file and copy it to the directory "files".    

    I can not attach a file type. Js, so you do need to change the file ClearButton.js:

 

    1.1. Find line in  the file ClearButton.js: this.textField.setValue (''); after this line paste the following code:

ajaxRequest (this.textField, '_clear', []);

    1.2. Find line in  the file ClearButton.js: (this.textField.setValue, 1, this.textField, ['']); after this line paste the following code:

ajaxRequest (this.textField, '_clear', []);

2. FindEdit -> ClientEvents -> ExtEvents -> add function keyup: ??

function keyup(sender, e, eOpts)
{
  if (sender.value == '') {
    ajaxRequest (sender, '_clear', []);
  };
}

3. Then you can catch the event clear, TRY:

procedure TMainFrame.FindEditAjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = '_clear' then
    begin
      ...
    end;
end;

4. Clear the browser cache (or press ctrl + R on tab localhost: 8077).

 

 

It's just one of the quick solutions, good luck...

 

Best regards.

 

Link to comment
Share on other sites

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