CODEWITHSUNDEEP
gwtglassfishgwt-ext
James
James

Reputation: 3625

GWT combobox not displaying correctly

I am using GWT with GWT-EXT running in glassfish. I create 2 combo boxes as follows:

import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;

this.contentPanel = new ContentPanel();
this.contentPanel.setFrame(true);
this.contentPanel.setSize((int)(Window.getClientWidth()*0.95), 600);
this.contentPanel.setLayout(new FitLayout());
initWidget(this.contentPanel);

SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setEmptyText("Select a topic...");
combo.add("String1");
combo.add("String2");
this.contentPanel.add(combo);

ComboBox combo1 = new ComboBox();
combo1.setEmptyText("Select a topic...");
ListStore topics = new ListStore();
topics.add("String3");
topics.add("String4");
combo.setStore(topics);
this.contentPanel.add(combo1);

When these are loaded in the browser (IE 8.0, Firefox 3.6.6 or Chrome 10.0) the combo boxes are shown but don't have the pull down arrow. They look like a text field with the "Select a topic..." text. When you select the text it disappears and if you type a character and then delete it the options are shown (i.e. pull down is invoked) however, there is still no pull down arrow.

Does anyone know what the issue might be? Or how I can investigate further? Is it possible to see the actual HTML the browser is getting, when I View Page Source I only get the landing page HTML.

As an additional I also have a import com.google.gwt.user.client.ui.Grid that does not render correctly. It is in table format but has no grid lines or header bar etc.

Cheers,

James

This is the HTML DIV with the issue:

<div class=" x-form-field-wrap  x-component" id="x-auto-5" style="width: 150px;">
    <input type="text" class=" x-form-field x-form-text  x-form-empty-field" id="x-auto-5-input" tabindex="0" autocomplete="off" style="width: 126px;">
    <img class="x-form-trigger x-form-trigger-arrow" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" id="x-auto-6">
</div>

I believe the image specified is the blank image. Why is it not using the arrow image surely it is a default GWT/browser image?

Upvotes: 0

Views: 2349

Answers (3)

James
James

Reputation: 3625

I was missing the following from my Landing html page. Well I had the reference but it was pointing to the wrong relative location.

<link rel="stylesheet" type="text/css" href="extgwt/css/gxt-all.css" />

Upvotes: 0

Ankit
Ankit

Reputation: 2753

If you are using GWT with GWT-EXT than why are you using combobox of EXT-JS use combobox of GWT-EXT.

Upvotes: 0

Gursel Koca
Gursel Koca

Reputation: 21280

FireBug would be your best friend with FireFox. You can inspect everything, css files, html or javascript.. I do have a similar problem , my problem was related to a missing image file. I did find it by means of firebug..

Upvotes: 1

Related Questions