PDA

View Full Version : GXT ButtonText not visible in IE8 or IE 7, renders fine in Google Chrome & Firefox



Hari.r
22 Sep 2010, 4:12 AM
Hi,

I have a GXT Form panel and i have added two GXT buttons (Submit and Cancel).

When application is deployed in Tomcat and viewed in Web browser like FireFox and Google Chrome i can see the Button Text displayed on Buttons (Button text like Submit and Cancel).
But when opened using IE8 or IE7, Buttons are visible but text on buttons are not visible.

sven
22 Sep 2010, 4:14 AM
Can you please post afully working testcase for this that implements EntryPoint and shows your problem? It is impossible to help you without this.

Hari.r
22 Sep 2010, 4:29 AM
Hi Sven,

Thanks for reply, let me know how to send the code across, i will send it right away (file with Entrypoint)

sven
22 Sep 2010, 4:30 AM
You should post it here as a standalone single class (best) testcase. So that everybody can run and help you without any further depencies.

Hari.r
22 Sep 2010, 5:19 AM
i have pasted my code below:


package com.abc.client.entrypoint;

import com.extjs.gxt.themes.client.Slate;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.state.StateManager;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.StoreSorter;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.util.Theme;
import com.extjs.gxt.ui.client.util.ThemeManager;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.custom.ThemeSelector;
import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.CheckBoxGroup;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.DualListField;
import com.extjs.gxt.ui.client.widget.form.FieldSet;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.ListField;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.Radio;
import com.extjs.gxt.ui.client.widget.form.RadioGroup;
import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.extjs.gxt.ui.client.widget.layout.TableData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.RootPanel;

import de.vogella.gwt.helloserver.client.model.*;
import de.vogella.gwt.helloserver.client.service.*;


public class HelloServer implements EntryPoint
{
public void onModuleLoad()
{

RootPanel.get().add(new FormsExample());


}
}

class FormsExample extends LayoutContainer {

private static VerticalPanel vp;
private FormData formData;


@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);

final BorderLayout Blayout = new BorderLayout();
setLayout(Blayout);
ContentPanel borderPanel = new ContentPanel();
ContentPanel west = new ContentPanel();
ContentPanel center = new ContentPanel();
ContentPanel north = new ContentPanel();

formData = new FormData("-20");
vp = new VerticalPanel();
vp.setSpacing(10);
vp.setHorizontalAlign(HorizontalAlignment.CENTER);

FormPanel form2 = new FormPanel();
form2.setFrame(true);
form2.setHeading("User Registration Form");
form2.setWidth(450);
form2.setLayout(new FlowLayout());

FieldSet fieldSet = new FieldSet();
fieldSet.setHeading("User Information");


FormLayout layout = new FormLayout();
layout.setLabelWidth(120);
fieldSet.setLayout(layout);

final TextField<String> userName = new TextField<String>();
userName.setFieldLabel("User Name");
userName.setAllowBlank(false);
fieldSet.add(userName, formData);

final TextField<String> firstName = new TextField<String>();
firstName.setFieldLabel("First Name");
firstName.setAllowBlank(false);
fieldSet.add(firstName, formData);

final TextField<String> middleName = new TextField<String>();
middleName.setFieldLabel("Middle Name");
fieldSet.add(middleName, formData);

final TextField<String> lastName = new TextField<String>();
lastName.setFieldLabel("Last Name");
fieldSet.add(lastName, formData);

final DateField date = new DateField();
date.setFieldLabel("Birth Date");
fieldSet.add(date, formData);

final TextField<String> city = new TextField<String>();
city.setFieldLabel("City");
city.setAllowBlank(false);
fieldSet.add(city, formData);

final Radio male = new Radio();
male.setBoxLabel("Male");
male.setValue(true);

final Radio female = new Radio();
female.setBoxLabel("Female");

final RadioGroup radioGroup = new RadioGroup();
radioGroup.setFieldLabel("Gender");
radioGroup.add(male);
radioGroup.add(female);
fieldSet.add(radioGroup, formData);

final Radio single = new Radio();
single.setBoxLabel("Single");
single.setValue(true);

final Radio married = new Radio();
married.setBoxLabel("Married");

final Radio divorced = new Radio();
divorced.setBoxLabel("Divorced");

final RadioGroup radioGroup1 = new RadioGroup();
radioGroup1.setFieldLabel("Marital Status");
radioGroup1.add(single);
radioGroup1.add(married);
radioGroup1.add(divorced);
fieldSet.add(radioGroup1, formData);

final SimpleComboBox<String> education = new SimpleComboBox<String>();
education.setFieldLabel("Education");
education.setEditable(false);
education.setForceSelection(true);
education.setTriggerAction(TriggerAction.ALL);
education.add("Student");
education.add("Under-Graduate");
education.add("Graduate");
education.add("Post-Graduate");
education.add("PHD");
fieldSet.add(education, formData);


final TextField<String> occupation = new TextField<String>();
occupation.setFieldLabel("Occupation");
fieldSet.add(occupation, formData);


final SimpleComboBox<String> averageIncome = new SimpleComboBox<String>();
averageIncome.setFieldLabel("Average Income");
averageIncome.setEditable(false);
averageIncome.setForceSelection(true);
averageIncome.setTriggerAction(TriggerAction.ALL);
averageIncome.add("1000 - 100000");
averageIncome.setData("1000 - 100000", "Lower");
averageIncome.add("100000 - 200000");
averageIncome.setData("100000 - 200000", "Lower-Middle");
averageIncome.add("200000 - 600000");
averageIncome.setData("200000 - 600000", "Middle");
averageIncome.add("600000 - 1200000");
averageIncome.setData("600000 - 1200000", "Upper-Middle");
averageIncome.add("1200000 & above");
averageIncome.setData("1200000 & above", "Upper");
fieldSet.add(averageIncome, formData);

final TextField<String> email = new TextField<String>();
email.setFieldLabel("Email");
email.setAllowBlank(false);
fieldSet.add(email, formData);

final NumberField mobile = new NumberField();
mobile.setFieldLabel("Mobile");
mobile.setAllowBlank(false);
mobile.setAllowDecimals(false);
mobile.setAllowNegative(false);
mobile.setMaxLength(10);
mobile.setMinLength(10);
fieldSet.add(mobile, formData);
form2.add(fieldSet);

final FieldSet fieldSetTA = new FieldSet();
fieldSetTA.setHeading("My Interests");
fieldSetTA.setCollapsible(true);

layout = new FormLayout();
layout.setLabelWidth(180);
fieldSetTA.setLayout(layout);
fieldSetTA.setCheckboxToggle(true);

TabPanel tabs = new TabPanel();

TabItem myinterest = new TabItem();
myinterest.setStyleAttribute("padding", "10px");
myinterest.setText("My Interest");
myinterest.setLayout(new FormLayout());



CheckBox movies = new CheckBox();

movies.setBoxLabel("Movies");

CheckBox theatre = new CheckBox();

theatre.setBoxLabel("Theatre Shows");

CheckBox musicalshows = new CheckBox();

musicalshows.setBoxLabel("Musical Shows");

CheckBoxGroup checkGroup = new CheckBoxGroup();
checkGroup.setFieldLabel("Entertainment");
checkGroup.add(movies);
checkGroup.add(theatre);
checkGroup.add(musicalshows);
myinterest.add(checkGroup, formData);
form2.add(myinterest);

CheckBox jobalerts = new CheckBox();

jobalerts.setBoxLabel("Job Alerts");

CheckBox walkins = new CheckBox();

walkins.setBoxLabel("Walkins");

CheckBox itevents = new CheckBox();

itevents.setBoxLabel("IT Events");

CheckBoxGroup checkGroup1 = new CheckBoxGroup();
checkGroup1.setFieldLabel("Career");
checkGroup1.add(jobalerts);
checkGroup1.add(walkins);
checkGroup1.add(itevents);
myinterest.add(checkGroup1, formData);

CheckBox colleges = new CheckBox();

colleges.setBoxLabel("Colleges");

CheckBox courses = new CheckBox();

courses.setBoxLabel("Courses");

CheckBox schedules = new CheckBox();

schedules.setBoxLabel("Schedules");

CheckBoxGroup checkGroup2 = new CheckBoxGroup();
checkGroup2.setFieldLabel("Education");
checkGroup2.add(colleges);
checkGroup2.add(courses);
checkGroup2.add(schedules);
myinterest.add(checkGroup2, formData);

CheckBox discounts = new CheckBox();

discounts.setBoxLabel("Discounts");

CheckBox offers = new CheckBox();

offers.setBoxLabel("Offers");

CheckBox newarrivals = new CheckBox();

newarrivals.setBoxLabel("New Arrivals");

CheckBoxGroup checkGroup3 = new CheckBoxGroup();
checkGroup3.setFieldLabel("Shopping");
checkGroup3.add(discounts);
checkGroup3.add(offers);
checkGroup3.add(newarrivals);
myinterest.add(checkGroup3, formData);

CheckBox restaruants = new CheckBox();

restaruants.setBoxLabel("Restaurants");

CheckBox reservations = new CheckBox();

reservations.setBoxLabel("Reservations");

CheckBox homedelivery = new CheckBox();

homedelivery.setBoxLabel("Home Delivery");

CheckBoxGroup checkGroup4 = new CheckBoxGroup();
checkGroup4.setFieldLabel("Food & Beverages");
checkGroup4.add(restaruants);
checkGroup4.add(reservations);
checkGroup4.add(homedelivery);
myinterest.add(checkGroup4, formData);

CheckBox hospitals = new CheckBox();

hospitals.setBoxLabel("Hospitals");

CheckBox healhtips = new CheckBox();

healhtips.setBoxLabel("Health Tips");

CheckBox pharmacy = new CheckBox();

pharmacy.setBoxLabel("Pharmacy");

CheckBoxGroup checkGroup5 = new CheckBoxGroup();
checkGroup5.setFieldLabel("Healthcare");
checkGroup5.add(hospitals);
checkGroup5.add(healhtips);
checkGroup5.add(pharmacy);

myinterest.add(checkGroup5, formData);

tabs.add(myinterest);
form2.add(tabs);


TabItem language = new TabItem();
language.setStyleAttribute("padding", "10px");
language.setText("Language");
language.setLayout(new FormLayout());

CheckBox english = new CheckBox();

english.setBoxLabel("English");
language.add(english);

CheckBox hindi = new CheckBox();

hindi.setBoxLabel("Hindi");
language.add(hindi);

CheckBox kannada = new CheckBox();

kannada.setBoxLabel("Kannada");
language.add(kannada);

CheckBox marathi = new CheckBox();

marathi.setBoxLabel("Marathi");
language.add(marathi);

CheckBox gujarati = new CheckBox();

gujarati.setBoxLabel("Gujarati");
language.add(gujarati);

CheckBox alllanguages = new CheckBox();

alllanguages.setBoxLabel("All Languages");
language.add(alllanguages);

CheckBoxGroup checkGroup6 = new CheckBoxGroup();
checkGroup6.setFieldLabel("Language");
checkGroup6.add(english);
checkGroup6.add(hindi);
checkGroup6.add(kannada);
checkGroup6.add(marathi);
checkGroup6.add(gujarati);
checkGroup6.add(alllanguages);

language.add(checkGroup6, formData);
form2.add(language);

tabs.add(language);
form2.add(tabs);

fieldSetTA.add(tabs);
form2.add(fieldSetTA);
form2.setButtonAlign(HorizontalAlignment.CENTER);

Button submit = new Button("Submit",new SelectionListener<ButtonEvent>()
{

@Override
public void componentSelected(ButtonEvent ce) {


Window.alert("value is " +ta_option);

}

});
Button cancel = new Button("Cancel");

form2.addButton(submit);
form2.addButton(cancel);

vp.add(form2);
center.add(vp);


ThemeSelector thselect = new ThemeSelector();
ThemeManager.register(Slate.SLATE);
Theme.GRAY.set("file","resources/css/gxt-gray.css"); //set custom css'es path for grey theme
Theme.BLUE.set("file","resources/css/gxt-all.css"); //set custom css'es path for standard blue theme
Slate.SLATE.set("file","resources/themes/slate/css/xtheme-slate.css"); //set custom path for SLATE theme


west.add(thselect);


borderPanel.setLayout(new BorderLayout());

BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,100);
northData.setCollapsible(true);
northData.setFloatable(true);
northData.setHideCollapseTool(true);
northData.setSplit(true);
northData.setMargins(new Margins(0, 0, 5, 0));


BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(0));

BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST,300);
westData.setFloatable(true);

westData.setSplit(true);

westData.setMargins(new Margins(0,5,0,0));


add(north, northData);
add(center, centerData);
add(west, westData);


}


}

sven
22 Sep 2010, 5:55 AM
I cannot reproduce this after fixing your code. As this is the same code as in your other thread, we better move the discussion to there: http://www.sencha.com/forum/showthread.php?110501-CheckBoxGroup-not-visible-in-FIreFox-and-Google-chrome-but-visbile-in-IE8

Hari.r
22 Sep 2010, 8:35 AM
can you please mention the code fix? is it the sizing of tab panel? This issue is related to text on button being displayed. Can you please mention the fix, it will be great help. Thanks for the quick replies

Hari.r
23 Sep 2010, 4:30 AM
any suggestions for the button issue? issue posted in other thread about checkbox has been solved.

sven
23 Sep 2010, 4:36 AM
As i said, i cannot reproduce this. Make sure that you are also using the latest css files from the 2.2 download.