PDA

View Full Version : Problem with Buttons and setStyleName



frankyro
7 Jul 2009, 4:08 AM
HI, all I'm new at gxt and i have a problem with the Button-Widget and SetStyleName.

Here is the Code :


import com.extjs.gxt.ui.client.widget.button.Button;
// import com.google.gwt.user.client.ui.Button;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Test implements EntryPoint {

public void onModuleLoad() {
Button bTest=new Button("Test");
bTest.setStyleName("myButton");
RootPanel.get("inhalt").add(bTest);
}
}and the CSS:


.myButton {
background-image: none;
background-color: white;
color : black;
border : none;
}

.myButton:hover {
background-image: none;
border:none;
}If I take the Button from the GWT it works perfekt. When I use the gxt-Button the CSS will be ignored.

Where is my mistake?

Thanks

sven
7 Jul 2009, 4:09 AM
Inspect the button with firebug and see whats wrong with your styling.

frankyro
7 Jul 2009, 4:44 AM
I can't see an error.

frankyro
7 Jul 2009, 9:54 PM
BUG ?????!!!!

I analysed it with firebug again and I found something.

I found my Styledefinition in the Table declaration wich wrapps the Button.

The Style of the Button is "x-btn-text". I think this ist not correct.

tomasi
7 Jul 2009, 11:40 PM
Try using addStyleName instead of setStyleName.
This is not a bug. I've asked that before. Now setStyleName is for Images bundling.

sven
8 Jul 2009, 12:40 AM
setStyleName is not for imagebundle and this is also not a bug. Try to explain in detail what you want do to

frankyro
8 Jul 2009, 12:41 AM
AddStyleName makes no Difference

frankyro
8 Jul 2009, 12:41 AM
AddStyleName makes no Difference

guys2008
8 Jul 2009, 2:38 AM
Hey,

Continuing what has been started here -
I'm trying to instantiate a GXT button with text but it just shows the text (and in the GWT shell it's not displayed at all...). I've tried to do it as simple as possible :


myLoginForm.addButton(new Button("Login"));

The CSS class is x-btn-text...

Any ideas ?

sven
8 Jul 2009, 2:40 AM
Are you using the latest css and iamges from the GXT2 release?

frankyro
8 Jul 2009, 3:09 AM
I uses GXT 2.0.

The download was done yesterday

sven
8 Jul 2009, 3:21 AM
I uses GXT 2.0.

The download was done yesterday

Your problem is not a bug or a problem. The stylename gets assigned to the component. That is what add/setStyleName is doing.

guys2008
8 Jul 2009, 3:25 AM
I've downloaded the gxt-2.0-rc1 version. I assume that the css folder inside it is the latest..
But how the css of the GXT is reflected in the eclipse ? cause I've added the ExtJS libraries (and css's) but I can't see anything related to the GXT css...

frankyro
8 Jul 2009, 5:09 AM
But the Style of the Button doesn't change.

I put the Resource Folder in my Projekt and the stylesheet is part of the Head just as the gxt-all.css. I do not understand it because when I use a gwt button it works perfectly.

guys2008
8 Jul 2009, 5:10 AM
Hi,

I managed to see the button styling - after I've imported into the eclipse the gxt-all.css, updated the module's XML file and copied the btn.gif into the images folder...

Everything is working fine now except one question -
Which resources do I have to put ? ExtJS's or ExtGWT's ?? I've imported ExtJS css,js and image files. What should I do with the ExtGWT files.. ?

sven
8 Jul 2009, 5:13 AM
You have to use the Ext GWT resources.

guys2008
8 Jul 2009, 5:17 AM
OK ... I've followed your tutorial... They said to import the ExtJS Styling, Images and JS files..

So in the bottom line - I'm removing the ExtJS components from my project (ext-all,ext-core,images folder and css folder ...) and replacing them with their corresponding GWT files ?

sven
8 Jul 2009, 5:21 AM
yes, you dont need to inlcude any stuff from extjs

guys2008
8 Jul 2009, 5:37 AM
Thanks ! It works Perfect !

saurabhsingh
9 Jul 2009, 3:27 PM
Hi,
I am having the same problem,
the button shows only the text and not the button image, its get clicked also.
and when i try the gwt button its shows up the button.
And i am using the lastest images frm the "gxt-2.0-m2" bundle
and the btn.gif is also there
please any help?

guys2008
10 Jul 2009, 12:27 AM
1) Check with Firebug if the btn.gif in its relative location that is written in the css class, is actually located in the corresponding path in your project.
2) Did you add the
<stylesheet src="res/css/gxt-all.css" />
to your module XML file ?

saurabhsingh
10 Jul 2009, 5:25 AM
Hi, Hi,When i inspect it with the firbug, it takes me to the button classs, "x-btn-text". And i have added the gxt-all.css to my module, because evry thing else if workin fine else this buttone image, please help??

sujata
27 Jul 2009, 1:57 AM
Hi All,

I am also facing similar kind of issue. :( Following is the sample code for the same:


expandAll.setToolTip("Expand All");
//expandAll.setIconStyle("icon-add");

expandAll.setStyleName("icon-add");
//expandAll.addStyleName("icon-add");

//expandAll.setStyleAttribute("backgroundColor", "white");
buttonBar.add(expandAll);

in my css file I have added following Style:


.icon-add {
background: url(images/icons/add.gif) no-repeat center left !important;
}

But still new style is not set. I have tried all the options addStyleName and setStyleAttribute.

Please look into this.

Thanks in advance,
Sujata

sven
27 Jul 2009, 1:58 AM
why are you not using setIconStyle to setup an icon?

sujata
27 Jul 2009, 2:02 AM
Thanks for a immidiate reply.

But I am facing same issue with the setIconStyle as well.

Thanks,
Sujata

sven
27 Jul 2009, 2:03 AM
Take a look at the button examples. It is working fine with setIconStyle.

sujata
27 Jul 2009, 2:16 AM
Following is additional information for the same after debugging:

baseStyle = "x-btn"
iconStyle = "icon-add"

and styles = ""

Still their is not change in the format. :( Can anybody help me for this?

Thanks,
Sujata