PDA

View Full Version : SelectorTheme displays shadow .x-ie-shadow



navi75
31 Jul 2009, 9:08 AM
I am new to GWT development and i am using EXT-GWT2.02 with GWT 1.7 and added a selectorTheme object into a toolbar which is displayed in a contentPanel.

The selectorTheme is not displaying properly and showing a shadow on the IE7 browser.

I have tried to debug the same with the IE developer toolbar and it shows a <DIV> with class as .x-ie-shadow

<DIV class=.x-ie-shadow/>

Did anyone knows how to resolve this issue or i am missing something.

Thanks

sven
31 Jul 2009, 9:12 AM
Looks fine for me. Class get set correctly, also the code looks fine.

Do you also ahve the issue in the demo explorer?

http://www.extjs.com/examples/explorer.html#overview

navi75
1 Aug 2009, 4:57 AM
I do not see any issue in the explorer demo, but wondering why it is showing the shadow on the selectorTheme while i am adding the same to the toolbar which is placed in a content panel. The contentPanel is placed in a verticalPanel which is being called by the RootPanel.

sven
1 Aug 2009, 5:00 AM
I guess i should better move this to the help forum. The shadow behind the list is a feature. You should post your code if something renders wrong.

navi75
1 Aug 2009, 5:52 AM
Thanks for the response. Below is my code snippet.

1) RootPanel consists of VerticalPanel.

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

2) VerticalPanel has the ToolBar

public MainCompVerticalPanel() {
super();
setId("mainComponents-verticalPanel");
setLayout(new FlowLayout(10));
setSpacing(5);
add(new AppToolBar().drawToolbar());
}

3) The AppToolBar is contentPanel which has the Toolbar.

public class AppToolBar {
public ContentPanel drawToolbar() {

ToolBar appToolBar = new ToolBar();
appToolBar.setBorders(true);
appToolBar.setSpacing(2);

ToggleButton oneToggleButton = new ToggleButton("one");
oneToggleButton.toggle(true);
oneToggleButton.setToolTip("One");
appToolBar.add(oneToggleButton);
appToolBar.add(new SeparatorToolItem());

ToggleButton twoToggleButton = new ToggleButton("two");
twoToggleButton.toggle(true);
twoToggleButton.setToolTip("two");

appToolBar.add(twoToggleButton);
appToolBar.add(new SeparatorToolItem());

ToggleButton threeToggleButton = new ToggleButton("Three");
threeToggleButton.toggle(true);
threeToggleButton.setToolTip("three");

appToolBar.add(threeToggleButton);
appToolBar.add(new SeparatorToolItem());

ToggleButton fourToggleButton = new ToggleButton("Four");
fourToggleButton.toggle(true);
fourToggleButton.setToolTip("Four");
appToolBar.add(fourToggleButton);
appToolBar.add(new SeparatorToolItem());

ToggleButton fiveToggleButton = new ToggleButton("Five");
fiveToggleButton.toggle(true);
fiveToggleButton.setToolTip("Five");
appToolBar.add(fiveToggleButton);
appToolBar.add(new SeparatorToolItem());

appToolBar.add(new FillToolItem());

ToggleButton sixToggleButton = new ToggleButton("Six");
sixToggleButton.toggle(true);
sixToggleButton.setToolTip("Six");
appToolBar.add(sixToggleButton);

appToolBar.add(new ThemeSelector());

ContentPanel appToolbarContentPanel = new ContentPanel();
appToolbarContentPanel.setId("appToolbar-contentPanel");
appToolbarContentPanel.setCollapsible(true);
appToolbarContentPanel.setHeading("Welcome To App");

appToolbarContentPanel.setLayout(new FitLayout());
appToolbarContentPanel.setSize(1200, 25);

appToolbarContentPanel.setTopComponent(appToolBar);
appToolbarContentPanel.add(new LayoutContainer());


return appToolbarContentPanel;
}

sven
1 Aug 2009, 6:00 AM
appToolbarContentPanel.setSize(1200, 25);

i height of 25 is a bit small to display a contentpanel with a header, a topcomponent and a child.