[Dynamic Grid] avec Extjs 4.2.2 (débutant! pour un temps)

Bonjour à tous,
J'ai un exemple de Dynamic Grid (dans le but dans construire un Grid avec ExtJs extensible sur les lignes et les colonnes)

Tout autre exemple seront les bienvenu pour voir une mieux compréhension? (a date je ne compared pas tout les subtilité)

Voilà mon code : (il affiche une page blanche sans message d'erreur!) :aie:

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" >
            "use strict";
            
        </script>
 
 
        <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
        <script type="text/javascript" src="ext-4/ext-all-debug.js"></script>
        <script type="text/javascript" src="appli.js"></script>  
    </head>
    <body> </body>
</html>

appli.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
Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false
});
 
Ext.application({
    requires: ['Ext.container.Viewport'],
    name: 'Appli',
    appFolder: 'application',   
 
    enableQuickTips:true,
    controllers: [
        'MainBorder',
        'tree',
        'Stocks',
        'Onglet1'
//        'requeteControler'
    ],
    autoCreateViewport: true,    
 
    launch : function(){
        Ext.create('Ext.container.Viewport', 
        {
            layout : 'anchor',
            items : [{
                xtype: 'Viewport'
            }]
        });
    }
});

Viewport.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ext.define('Appli.view.Viewport', {
    extend: 'Ext.container.Viewport',
 
    initComponent: function() {
        var me = this;
        Ext.apply(me, {
            layout: 'fit',
            items: [{
                xtype: 'Mainborder',
                title: 'Builder v0.1'
            }]
        });
 
        me.callParent(arguments);
    }
 
});

DynamicGrid.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
Ext.define('Appli.view.DynamicGrid', {  
    extend: 'Ext.Viewport',    
    layout: 'fit',
    requires: [
        'Ext.ux.grid.DynamicGrid'
    ],
 
    initComponent : function(){
        console.log('Viewport initComponent!');
        var me = this;
 
        Ext.apply(me, 
        {
            items: [
                {
                    xtype: 'dynamicGrid',
                    url: './data.js',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            dock: 'top',
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'Load Data',
                                    action: 'btnLoadData'
                                },
                                {
                                    xtype: 'button',
                                    text: 'Load Data2',
                                    action: 'btnLoadData2'
                                }
                            ]
                        }
                    ]
                }
            ]    
        });
 
        me.callParent(arguments);
    }
});

MainBorder.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
55
56
57
58
 
Ext.define('Appli.view.MainBorder', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mainborder',
    layout: 'border',
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
            items: [{
                    xtype: 'treeView',
                    region: 'west',
                    title: 'Filtre <input type="text" name="filtered-tree" />',
                    width: 200,
                    split: true,
                    collapsible: true,
                    floatable: false
                }, {
                    xtype: 'tabpanel',
                    id: 'globaltab',
                    region: 'center',
                    items: [{
                        id: 'onglet1',    
//                        rtl: false,
                        title: 'Composé votre requête',
                        xtype: 'Onglet1'
                    }, {
                        id: 'onglet3',
                        title: 'Resultat tabulaire',
                        html: 'Hello world 3'
                    }, {
                        id: 'onglet4',
                        title: 'Code de requête',
                        html: 'Hello world 4',
                        closable: true
                    }]                    
                },{
                    xtype: 'toolbar',
                    region: 'north',
                    items: [{
                        text: 'Connexion'
                    },{
                        text: 'exécuter',
                    },{                        
                        text: 'A propo',
                        plain: true        
                    }]
 
                  }
            ]
 
 
        });
 
        me.callParent(arguments);
    }
 
 
});

Onglet1.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
 
Ext.define('Appli.view.Onglet1', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.Onglet1',
    layout: {
        type: 'vbox',
        align : 'stretch',
        pack  : 'start',
    },
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
        items: [
            {
                html:"<iframe  src='http://rootServeur/index.html' height='100%' width='100%' ></iframe>",
                title: 'Requete graphique',
                flex:1
            },
            {
                xtype: 'DynamicGrid',
                title: 'Tableau des filtres',
                flex:2
            }
        ]
 
        });
 
        me.callParent(arguments);
    }
 
 
});

Grand merci d'avance.

Bonjour,

Utilise tu un outil genre firebug ?

Dans le viewport tu as un item "xtype: 'Mainborder'" mais exist-il ?

Citation:

Envoyé par abraxis

Utilise tu un outil genre firebug ?

Oui. avec l'inspecteur d'élément de Google Chrom (y pas de message d'erreur!)

Citation:

Envoyé par abraxis

Dans le viewport tu as un item "xtype: 'Mainborder'" mais exist-il ?

Je viens de l'ajouté (un oubli de ma part) mais je vais voir comment mettre tout le code à disponibilité.

Grand merci d'avance de votre aide

1 pièce(s) jointe(s)

ci-joint

Mon code disponible ici, toute suggestion serai la bienvenu.

Pièce jointe 184011

Merci!