PDA

View Full Version : How to add Mouselistener in TextArea?



livinglegends
4 Jul 2010, 11:35 PM
Hi,

I am facing one issue in TextArea. In my form I have one text area and Ok button. Ok button should get enabled when there is at least one character in textarea.

I have added key listener to identify if there is any word or not and if then it will enabled button else disable it.

Same thing should happen if user copy and paste data into TextArea. Ok button will get enabled when user copy and paste data using keyboard but it doesn't get enabled when it copy past data using mouse as no listener found for it.

So, how to achieve this thing?

Hope, I am clear about my problem.

Thanks and Regards
Livinglegends

Animal
4 Jul 2010, 11:50 PM
allowBlank: false on the textarea

monitorValid: true on the FormPanel

And formBind: true on the Button

gevik
4 Jul 2010, 11:51 PM
Perhaps you will find your answer by using field validation instead of custom listener implementation.
Take a look at the *allowBlank* config option. Next to that you also should look at the *formBind* config option which enables and disables your submit button if a form is valid or not.

I hope this helps.

livinglegends
5 Jul 2010, 12:02 AM
Hi,

formBind property is not available for button as per the API

Animal
5 Jul 2010, 12:08 AM
Docs aren't perfect. Yet.

http://www.sencha.com/deploy/dev/docs/?class=Ext.form.FormPanel&member=buttons

livinglegends
5 Jul 2010, 12:20 AM
It still not there in link given by you. But, any way I have put allowBlank: false on the textarea, monitorValid: true on the FormPanel
And formBind: true on the Button but still no luck.

When I do copy paste using mouse, button still remain disabled.

Animal
5 Jul 2010, 12:21 AM
It works.

livinglegends
5 Jul 2010, 12:25 AM
Oh sorry...actually I forget to mention one thing..

Button is not in formpanel but it is outside form panel. So, may be its not work.
But what to do in my situation?

Animal
5 Jul 2010, 12:28 AM
Monitor the FormPanel's valid event yourself to enable/disable.

I'd recommend adding a validitychange event by putting some code into an override of FormPanel.bindHandler



if (valid != this.isValid) {
this.fireEvent('validitychange', this, valid);
this.isValid = valid;
}


Then you could monitor that.

livinglegends
5 Jul 2010, 1:58 AM
Hi.

But I want to get button enabled when user paste data using mouse. When I click paste using mouse at that time but didn't get enabled but on blur event it get enabled.

That means I want some event on TextArea to capture mouse event.

Animal
5 Jul 2010, 2:13 AM
Has someone merged in a duplicate thread?

livinglegends
5 Jul 2010, 2:20 AM
Didn't get your reply..

Condor
5 Jul 2010, 2:53 AM
TextArea validation doesn't (only) use the 'blur' event, it uses the 'keyup' event!

Are you sure you are talking about a TextArea and not about a HtmlEditor?

livinglegends
5 Jul 2010, 3:18 AM
TextArea validation doesn't (only) use the 'blur' event, it uses the 'keyup' event!

Are you sure you are talking about a TextArea and not about a HtmlEditor?

yes, I am surely using TextArea. I am using xtype: 'textarea' to create component.

livinglegends
5 Jul 2010, 3:52 AM
yes, I am surely using TextArea. I am using xtype: 'textarea' to create component.

If I use HtmlEditor, then this problem can be solved?

Animal
5 Jul 2010, 3:59 AM
Yes.

Monitor its validity status.

It's what I'm doing here:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/formbind-validation.jpg

That "Create" button only gets enabled when the form is valid. I use that bit of extra code and listen for the validitychange event.

Condor
5 Jul 2010, 4:09 AM
If I use HtmlEditor, then this problem can be solved?

The other way around. Animals suggestion works for TextArea, but only partially for HtmlEditor (because it has no keyup event support).

livinglegends
5 Jul 2010, 4:17 AM
so, please give me suggestions or hint to resolve it.
My main requirement is, button should get enabled immediately as copied data pasted in TextArea or HtmlEditor by using mouse.

Condor
5 Jul 2010, 4:24 AM
You would also need to do validation on cut and paste events (which not all browsers support).

But monitorValid currently polls for validity, so it should still work (have you even tried Animal's suggestion?).

livinglegends
5 Jul 2010, 4:58 AM
You would also need to do validation on cut and paste events (which not all browsers support).

But monitorValid currently polls for validity, so it should still work (have you even tried Animal's suggestion?).

I have tried Animal' suggestion by setting monitorValid property of FormPanel to true and formBind property of button to true but it will not work for me as button is not part of FormPanel.

Animal
5 Jul 2010, 5:00 AM
So monitor the valid status yourself!

Condor
5 Jul 2010, 5:05 AM
If the button is not part of the form then you will need to enable/disable it yourself from the clientvalidation event, e.g.

form.on('clientvalidation', function(form, valid){
mybutton.setDisabled(!valid);
});
(in combination with allowBlank:false and monitorValid:true as Animal suggested)

livinglegends
5 Jul 2010, 11:28 PM
If the button is not part of the form then you will need to enable/disable it yourself from the clientvalidation event, e.g.

form.on('clientvalidation', function(form, valid){
mybutton.setDisabled(!valid);
});(in combination with allowBlank:false and monitorValid:true as Animal suggested)

I know that I have to do enabling/disabling manually and in fact I am doing it but I am facing problem when I am doing copy/paste in textarea using mouse. And that's why I am asking for some event to track that some one has did pasting using mouse.

If someone do pasting using keyboard than its working fine as I have manually enabled button but I am not getting mouse event so how can I recognize when I have to enable button?

I have tried code given by you also but code written on 'clientvalidation' event not called means not getting 'clientvalidation' event.
Hope now my issue is cleared.

Condor
5 Jul 2010, 11:46 PM
You only get 'clientvalidation' events if you configured the form with monitorValid:true.

Animal
5 Jul 2010, 11:53 PM
Maybe the FormPanel Should start its validation task if you add a clientvalidation listener?



Ext.override(Ext.form.FormPanel, {
addListener: function(evt) {
Ext.form.FormPanel.superclass.addListener.apply(this, arguments);
if (evt == 'clientvalidation') {
this.startMonitoring();
}
}
});


In fact, possibly Observable should have a template method which it calls when it's listeners change state so that Observable classes can do this kind of thing easily.

Something like onListenersChanged.

livinglegends
6 Jul 2010, 12:04 AM
You only get 'clientvalidation' events if you configured the form with monitorValid:true.

Yes, I have set monitorValid: true in form

Condor
6 Jul 2010, 3:27 AM
Can you double-check your code? If you configure a FormPanel with monitorValid:true then you MUST get clientvalidation events.

livinglegends
6 Jul 2010, 3:50 AM
Can you double-check your code? If you configure a FormPanel with monitorValid:true then you MUST get clientvalidation events.

As per our need and design, I have converted FormPanel to normal Panel. Now, textarea is in a normal Panel and button is outside panel.

Now, concept of clientvalidation will not work here so how to achieve my requirement?

Condor
6 Jul 2010, 4:05 AM
In that case you will have to create your own validation monitoring (create a task that runs every n msecs that checks the valitity of the fields and updates the button state accordingly - see FormPanel.startMonitoring+bindHandler).

livinglegends
6 Jul 2010, 4:52 AM
In that case you will have to create your own validation monitoring (create a task that runs every n msecs that checks the valitity of the fields and updates the button state accordingly - see FormPanel.startMonitoring+bindHandler).

Can you give some code hint how to create such schedule task in extjs which run on every n msec?

Condor
6 Jul 2010, 4:53 AM
As I said, have a look at the code for FormPanel.startMonitoring+bindHandler.

livinglegends
6 Jul 2010, 5:15 AM
Ok and once this Ext.TaskMgr starts, how to stop it?

livinglegends
6 Jul 2010, 5:57 AM
Ok and once this Ext.TaskMgr starts, how to stop it?


Ok Condor-Animal thanks...
Finally I got my problem resolved and achieved behavior what I want.

Thanks a ton to both of you...