Tableau + dataGrid

Bonjour,

j'essaie d'intégrer un dataGrid a mon tab grâce à la librairie extjs.

Voici le code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<html>
<head>
<title>TabPanel Tutorial</title>
<!-- Ext CSS and Libs -->
<link rel="stylesheet" type="text/css"    href="../../../resources/css/ext-all.css" />
<script type="text/javascript"    src="../../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext-all.js"></script>
<script type="text/javascript" src="tab_actions.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" /><!-- LIBS -->
</head>
<body>
    <div id="tableau">
        <div id="acheteurs" class="x-hide-display">
            <div id="acheteurGrid"></div>
        </div>
        <div id="vendeurs" class="x-hide-display">
            World, hello ! o/
        </div>
    </div>
 
</body>
</html>

et voici la source de mon fichier tab_actions.js:

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
Ext.onReady(function(){
    
    //Le développement d'un tab se fait grâce à Ext.TabPanel:
    var tableau = new Ext.TabPanel({
        //Lui donné une valeur <div id="..."
        renderTo: 'tableau',
        
        //une fois celà fait, nous pouvons définire la frame:
        frame: true,
        
        //Puis les dimensions
        width: 600,
        height: 350,
        
        //Le fait d'être autoScrollable
        autoScrollable: true,
        
        //Ensuite nous pouvons définir les items:
        items:[
            //ContentE1 = <div id="valeur_contentE1">
            {
                contentE1:'acheteurs',
                title:'Clients acheteurs',
                autoLoad: loadGrid()
            },
            {
                contentE1:'vendeurs',
                title:'Clients vendeurs',
                autoLoad: {url: 'helloworld.php'}
            }
        ]
    });
    
    function loadGrid() {
        var loadInfo = new Ext.GridPanel({
            //url: 'clientAcheteur.xml',
            reader: new Ext.data.XmlReader({
                record: 'item',
                id: 'id'
            })
        });
        
        var grid = new Ext.grid.GridPanel({
            store: loadInfo,
            columns: [
            {header: "Nom", width: 120, dataIndex:'lastName', sortable: True},
            {header: "Prénom", width: 120, dataIndex:'firstName', sortable: True},
            ],
            render-to:'grid',
            width: 240,
            height: 200
        });
    };
});

Je vous ai mis en gras ce qui nous intéresse, tout d'abord, lorsque je charge la page, il me donne un erreur ainsi:

Firebug's log limit has been reached. %S entries not shown. Preferences
missing : after property id
[Break on this error] render-to:'grid',\n

Ensuite, je n'ai plus rien qui s'affiche.
Sinon, comment Faire pour intégrer mon grid dans mon tableau?

Meilleures salutations