[Toolbar] Affichage différé [Résolu]

[Siriru]

Bonjour,

je débute avec ExtJS et j'ai déjà un problème. Mon interface n'est pas rendue entièrement. La toolbar n'est affichée qu'après. J'ai essayé les doLayout dans tous les sens mais pas moyen.

Voici mon code, au passage, si j'ai codé un peu bizarrement n'hésitez pas à me le faire savoir :

Code :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
Ext.onReady(function(){
 
  var tab_panel = new Ext.TabPanel({
    id:'tab-panel',
    region:'center',
    activeTab: 'bienvenue-tab',
    border: false,
    items: [{
      xtype:'panel', 
      title:'Bienvenue',
      activeTab:0,
      id:'bienvenue-tab',
      closable: true
    }]
  });
 
  var root = new Ext.tree.TreeNode({
    text: 'noeud1',
    expanded: true
  });
 
  var root2 = new Ext.tree.TreeNode({
    text: 'noeud1',
    expanded: false
  });
 
  var actions = new Ext.tree.TreePanel({
    id: 'actions',
    title: 'Actions',
    root: root
  });
 
  var settings = new Ext.tree.TreePanel({
    id: 'settings',
    title: 'Settings',
    root: root2
  });
 
  var menu = new Ext.Panel({
    id:'menu',
    region: 'west',
    title: 'Menu',
    border: false,
    collapsible: true,
    margins:'0 0 0 0',
    layout:'accordion',
    width: 200,
    minSize: 175,
    maxSize: 400,
    items: [
      actions, 
      settings 
    ]
  });
 
  var button = new Ext.Button({
    id: 'button',
    text: 'clic me'
  });
 
  var header = new Ext.Toolbar({
    id: 'header',
    region:'north',
    autoHeight: true,
    border: false,
    margins: '0 0 0 0',
    layout: 'toolbar',
    items: [
      '<h1>My title</h1>',
      '->',
      '<span id="logout">se déconnecter</span>',
    ]
  });
 
  var viewport = new Ext.Viewport({
    id: 'viewport',
    layout: 'border',
    items: [ header, tab_panel, menu ]
  });
});