TwinTriggeredField wierd visual problem

**eugenparaschiv** · 30 Jul 2008 7:15 AM

I added a TwinTriggerField into a panel, and I am noticing some very weird visual aberrations. When going with the mouse over the two triggers, they become jumpy (for lack of a better word); they flicker a little and move right below the text field. Has this happend to anyone else? And if so, how do I fix it? Thank you. Eugen.

**gslender** · 30 Jul 2008 1:00 PM

provide some details regarding what browser/platform, also what html doctype are you using

**eugenparaschiv** · 30 Jul 2008 11:00 PM

I am not using the external browser. I am using the internal browser in the GWT, and the problem occurs there. Even if this doesn't happen in another browser, this would still be a problem. One thing I noticed, although I cannot say for sure if this accounts for the problem, are some inconsistencies between the implementation of the TriggerField and that of the TwinTriggerField.

**gslender** · 30 Jul 2008 11:42 PM

if you want some help, provide the details regarding what browser (I'm assuming hosted) and platform (win xp/linux etc), also what html doctype are you using in the HTML file...

**gslender** · 31 Jul 2008 12:01 AM

...oh and post some code in this format... http://extjs.com/forum/showthread.php?t=33778

**eugenparaschiv** · 31 Jul 2008 12:17 AM

I am using
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Some simple code
package com.extjs.gxt.main.client.service.mail;

import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.form.TwinTriggerField;
import com.extjs.gxt.ui.client.widget.layout.CenterLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Testing extends LayoutContainer implements EntryPoint {
public void onModuleLoad() {
Viewport v = new Viewport();
v.setLayout(new FitLayout());
v.add(this);
RootPanel.get().add(v);
}

public Testing() {
setLayout(new CenterLayout());

TwinTriggerField twinTrigger = new TwinTriggerField();
twinTrigger.setFieldLabel("Twin Trigger");
this.add(twinTrigger);
}

}

**gslender** · 31 Jul 2008 1:24 AM

Tried your code and it rendered perfect for me on XP and IE7 and FF3 - Are you including only the GXT CSS file in your HTML?

I made some modifications but none of these changed the outcome of a perfect rendered twin-triggger... ???

Code:

	public void onModuleLoad() {
		Viewport v = new Viewport();
		v.setLayout(new FitLayout());
		v.add(this,new MarginData(20));
		RootPanel.get().add(v);
	}

	public TwinTriggerTest() {
		setLayout(new FormLayout());
		TwinTriggerField twinTrigger = new TwinTriggerField();
		twinTrigger.setFieldLabel("Twin Trigger");
		this.add(twinTrigger);
	}

**eugenparaschiv** · 31 Jul 2008 4:32 AM

You were right, it was a CSS problem, and it can be fixed somwhat. Let me be clearer: the TwinTriggerField handles the ONMOUSEOVER and ONMOUSEOUT events by simply setting a CSS style on the trigger, but it does this in a hardcoded manner, like so:
case Event.ONMOUSEOUT:
fly(twinTrigger).removeStyleName("x-form-trigger-over");
break;

Tacking this into account, how can I set another CSS on the trigger, so that when these events occur, I can use that style on the trigger, and not the hard coded one? Is there any way to do this? I ask because at first sight, this is a simple problem to solve by changing a few things in the code of the TwinTriggerClass, but not so easily changed from outside. Thank you for your help. Eugen.

**gslender** · 31 Jul 2008 5:21 AM

extend the class and, based on the existing source, modify ;-)

**eugenparaschiv** · 31 Jul 2008 5:25 AM

I did

The problem with this is that I loose any changes that may be implemented in later versions. But I see no other choice. Thank you for all the help.

TwinTriggeredField wierd visual problem

Thread Tools

Search Thread

Display

TwinTriggeredField wierd visual problem

TwinTriggeredField wierd visual problem

Platform

Platform