GXT et taille des fenêtres

**knice** · 26/02/2010, 09h51

Bonjour, j'ai un problème avec GXT au niveau de l'affichage...

Je travaille avec:

MyEclipse 8.0
GWT - 2.0.2
GXT 2.1.1
ext 3.1.1

Voici les différents éléments de mon code...

Ma page HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="ExtGWT_3.css">
    <link type="text/css" rel="stylesheet" href="css/gxt-all.css"/>
 
    <title>Web Application Starter Project</title>
    <script type="text/javascript" language="javascript" src="extgwt_3/extgwt_3.nocache.js"></script>
  </head>
  <body>
 
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
 
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
 
    <div id="resultTd">
  </body>
</html>

mon .gwt.xml :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='extgwt_3'>
	<!-- Inherit the core Web Toolkit stuff.                        -->
	<inherits name='com.google.gwt.user.User' />
	<inherits name='com.extjs.gxt.ui.GXT' />
 
	<!-- Inherit the default GWT style sheet.  You can change       -->
	<!-- the theme of your GWT application by uncommenting          -->
	<!-- any one of the following lines.                            -->
	<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
	<inherits name='com.google.gwt.user.theme.chrome.Chrome' />
	<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->
 
	<!-- Other module inherits                                      -->
 
	<!-- Specify the app entry point class.                         -->
	<entry-point class='com.gwt.romain.client.ExtGWT_3' />
 
	<!-- Specify the paths for translatable code                    -->
	<source path='client' />
	<source path='shared' />
 
</module>

mon entry point :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
Window window = new Window();
		ContentPanel contentPanel = new ContentPanel();
 
		window.setMaximizable(true);
		window.setClosable(false);
		window.setCollapsible(false);
		window.setHeading("Esperons que ca marche");
 
		BorderLayoutExample borderLayoutExample = new BorderLayoutExample();
		contentPanel.add(borderLayoutExample);
		window.add(contentPanel);
 
		RootPanel.get("resultTd").add(borderLayoutExample);

Le code de mon BorderLayoutExample.onRender :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
super.onRender(target, index);
		final BorderLayout layout = new BorderLayout();
		setLayout(layout);
		setStyleAttribute("padding", "10px");
 
		ContentPanel north = new ContentPanel();
		ContentPanel west = new ContentPanel();
		ContentPanel center = new ContentPanel();
		//center.setHeading("BorderLayout Example");
		center.setHeaderVisible(false);
		//center.setScrollMode(Scroll.AUTOX);
 
		//center.add(new RowEditorExample(5, 5));
 
		BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
				100);
		northData.setCollapsible(false);
		northData.setFloatable(true);
		northData.setHideCollapseTool(true);
		northData.setSplit(true);
		northData.setMargins(new Margins(0, 0, 0, 0));
		north.setHeaderVisible(false);
		north.setBorders(false);
 
		BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, (float) 0.2);
		westData.setSplit(true);
		westData.setCollapsible(true);
		westData.setMargins(new Margins(0, 0, 0, 0));
		west.setAutoHeight(true);
 
		BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER, (float) 0.8);
		centerData.setMargins(new Margins(0, 0, 0, 0));
		centerData.setFloatable(true);
		centerData.setSplit(false);
		centerData.setCollapsible(false);
		centerData.setHideCollapseTool(false);
 
		add(north, northData);
		add(new MenuGauche(), westData);
		add(new EcranPrincipal(), centerData);

Mon EcranPrincipal.onRender :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
super.onRender(parent, pos);
		//setStyleAttribute("padding", "10px");
		setStyleAttribute("border", "2px solid red");
		setStyleAttribute("width", "100%");
		VerticalPanel vp = new VerticalPanel();
		vp.setSpacing(0);
		//vp.setHeight(400);
 
 
		advanced = new TabPanel();
		//advanced.setSize(800, 450);
		advanced.setStyleAttribute("margin", "0px");
		advanced.setStyleAttribute("padding", "0px");
		advanced.setStyleAttribute("width", "100%");
		advanced.setStyleAttribute("border", "2px solid green");
		//advanced.setMinTabWidth(115);
		advanced.setResizeTabs(true);
		advanced.setAnimScroll(true);
		advanced.setTabScroll(true);
		advanced.setCloseContextMenu(true);
		//advanced.setHeight(400);
 
		TabItem item = new TabItem();
		item.setText("Bienvenue");
		item.setClosable(false);
		//item.addStyleName("pad-text");
		item.addText("toto<br>tata<br>titi<br>tutu<br>ralala<br><br><br>schtroumph");
		advanced.add(item);
 
		advanced.setSelection(advanced.getItem(6));
 
		vp.add(advanced);
		add(vp);

Et quelque chose d'équivalent pour mon MenuGauche.onRender...

Ce que j'aimerais que ça fasse :

que mes différentes fenêtres (EcranGauche(WEST) et EcranPrincipal(CENTER)) prennent toute la place disponible dans le sens de la hauteur.
que mon EcranPrincipal(CENTER) arrête de dépasser sur la droite (il a une taille genre 6000px en largeur )

Auriez-vous une idée ? Merci beaucoup

**knice** · 26/02/2010, 14h55

Bon, j'ai déjà résolu un problème (le plus récent) : celui de mon EcranPrincipal qui dépassait sur la droite.

En fait, dans le fichier BorderLayoutExample, je le rajoutais directement dans la partie CENTER :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

add(new EcranPrincipal(), centerData);

et par conséquent, je pense qu'il héritait des paramètres de la fenêtre complète.

J'ai donc rajouté mon EcranPrincipal dans un ContentPanel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
ContentPanel center = new ContentPanel();
center.add(new EcranPrincipal());
...
add(center, centerData);

Et là, ça marche beaucoup mieux.

Bon, il ne reste plus qu'à trouver comment faire en sorte que le Height aille jusqu'en bas de la page

**TomDush** · 26/02/2010, 23h08

Salut,

J'ai lu qu'en Z ton post, mais ton layout qui ne remplit pas toute la page me fait penser à un problème que j'ai déjà eu :
Essaie de mettre un FillLayout (si tu n'as qu'un seul composant enfant, sinon FitLayout) comme layout de ton "panel main", ici window je pense.

Pour plus d'info sur ces layout : Javadoc filllayout

edit : j'ai retouvé le bout de code illustrant le principe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
Viewport viewport = new Viewport();
viewport.setLayout(new FillLayout());
...
 
 
RootPanel.get().add(viewport);

En espérant avoir pu te donner une piste valable,
Dush

**knice** · 01/03/2010, 09h31

Oh TomDush,
tu me sauves !!!!
J'ai passé 2 jours complets à chercher la solution la semaine dernière...

C'est tellement beau ce que tu viens de me dire

Je vais enfin pourvoir faire des choses un petit peu plus intéressantes :p

Merci beaucoup !!!!

GXT et taille des fenêtres

GWT et Vaadin Java

Discussions similaires

Partager

Partager